Question

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

Answer 1

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

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

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

Answer 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;
}

Answer 3

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

Answer 4

尝试淡入淡出。

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

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

虽然依赖于复杂性，您可能需要jQuery UI，正如其他人所提到的那样。

jQuery：如何在类之间淡出？

4 个答案: