jQuery：如何在类之间淡入淡出？答案

【问题标题】：jQuery: how to fade between classes?jQuery：如何在类之间淡入淡出？
【发布时间】：2012-01-20 00:34:41
【问题描述】：

我需要能够在类之间淡入淡出，并无缝转换应用于元素及其子元素的所有样式。如何使用 jQuery 来做到这一点？我知道如何添加/删除类，但这与两种截然不同的颜色之间的良好过渡不同。

【问题讨论】：

可能重复：stackoverflow.com/questions/2176413
您可以使用 jQuery UI 的 Transition 插件 (IIRC) 来完成此操作，但我不愿意推荐 jQuery UI，但这是个人喜好。
必须用jQuery来完成吗？如果您使用其专有样式规则，大多数最新浏览器（当然，IE 除外，可能下一个版本 IE10 除外）在一定程度上支持 CSS 过渡。还是这是问题所在？

标签： jquery css class

【解决方案1】：

jQuery UI 有一个 toggleClass 函数，它有一个持续时间参数：

http://jqueryui.com/demos/toggleClass/

例如，我在我的一个网站上执行此操作（淡入/淡出light 类和淡入/淡出dark 类）：

$('body').toggleClass('light', 250).toggleClass('dark', 250);

【讨论】：

这看起来很有希望。我得去看看。谢谢！
因为你的回答在技术上达到了我的要求，我给你的功劳，但我对 jQuery UI 类动画的体验很糟糕。我最终一起破解了一些东西，其中涉及位于内容后面的淡入/淡出层。
在这种情况下，可能有一种更有效的方式来构建您的布局。有时我必须重复我的计划六次才能开始功能健全。 :)
我想知道为什么在 jQuery API api.jquery.com/toggleclass987654322@ 中没有记录这一点
@EdwardBlack 因为正如答案所说，它是 jQuery UI，而不是 jQuery 核心。

【解决方案2】：

这是您想要完成的任务吗？ Here's the jsFiddle

HTML：

<input type="button" id="toggle" value="toggle" />
<br />
<div id="classContainer">

    <div id = "class1">

    </div>
    <div id = "class2">
    </div>
</div>

jQuery:

$("#toggle").click(function (){
    if ($("#class1").is(":visible")) {
        $("#class1").fadeOut();
        $("#class2").fadeIn();
    }
    else {
        $("#class1").fadeIn();
        $("#class2").fadeOut();
    }
 });

CSS：

#classContainer
{
    position: relative;
}

#class1, #class2
{
    height: 100px;
    width: 100px;
    position: absolute;
    top: 0;
    left: 0;
}

#class1
{
    background-color: red;
    display: none;
}

#class2
{
    background-color: blue;
}

【讨论】：

这基本上就是我最终做的事情

【解决方案3】：

查看 jQuery 的颜色插件：https://github.com/jquery/jquery-color

【讨论】：

【解决方案4】：

尝试淡入。

$(".myClass").fadeIn("slow");

http://api.jquery.com/fadeIn/

尽管根据复杂性，您可能需要其他人提到的 jQuery UI。

【讨论】：

这将淡入元素，而不是应用于元素的类。
没错，这个功能应该在 jQuery 核心 imo 中。