当类随jQuery改变时，如何为元素的css属性添加动画？答案

【问题标题】：How to add animation to the element's css attributes when the class changes with jQuery?当类随jQuery改变时，如何为元素的css属性添加动画？
【发布时间】：2013-06-26 11:26:05
【问题描述】：

问题：

我有一个 HTML 元素，它有一个类 hidden，它设置 css 属性 display: none;。当我使用 JS 删除类时，元素立即可见（恢复了原始的 display 值）。我希望能够设置“出现”动画的持续时间，就像我可以使用的那样：$('.hidden').show(1000) 或$('.hidden').fadeIn(1500)。我尝试与.animate() 链接，但没有成功。

限制

不能乱用元素的内联CSS（尤其不能设置display: block）
它的行为应该类似于 jQueryUI removeClass:http://jqueryui.com/removeClass/

问题：

我如何使更改变为动画（持续时间 > 0）删除（更改）HTML 元素的类？

代码：

CSS：

.hidden{
display: none;
}

HTML

<div class="hidden"> Lorem ipsum </div>

JS

$('.hidden').removeClass('hidden')

【问题讨论】：

标签： javascript jquery css

【解决方案1】：

http://jsfiddle.net/DU2Wg/1/

有了你的 HTML 和 CSS，你就可以使用这个 JS 了：

$('.hidden')
    .css({ // Change your CSS directly to
          'display':'inline', // the display you want
          'opacity':0 // from opacity 0
    })
    .animate({ // Will change your CSS over time
           opacity:1 // to opacity 1
           },
           2000,  // in 2 secs
           function(){
               $(this).removeClass('hidden'); // will remove your class (only if you want to use it once
               alert($(this).css('display')); // will alert "inline", your current display on that element
           }
    );

【讨论】：

【解决方案2】：

你删除了你需要淡入淡出的类，那是错误

你可以试试这个 Example

HTML

<h1 class="hide" style="display:none; ">Display</h1>

JS

$(function () {
$(".hide").fadeIn('slow');
});

【讨论】：

我不想使用内联 CSS 样式 - 我不能，而且我觉得它们很难看。我搜索的解决方案应该是纯JS/jQuery。

【解决方案3】：

$('.hidden').show(1000,function(){$(this).removeClass('hidden').css('display','');});

这将使用动画显示它，一旦动画完成，我们将删除该类...

【讨论】：

我试过了，不幸的是它设置了丑陋的内联style="display:block"，这是我不能允许的。

【解决方案4】：

如果您需要此动画在现代浏览器中运行，请使用 css 过渡！

.hidden{
    display: none;
}
.hidden.fadeIn{
    display: block;
    opacity:0;
    visibility:hidden;
    -webkit-transition: all 1s;
    -moz-transition: all 1s;
    -ms-transition: all 1s;
    -o-transition: all 1s;
    transition: all 1s;
}
.hidden.fadeIn.do{
    opacity:1;
    visibility:visible;
}

在 JS 中你可以这样设置类：

$('.hidden').addClass('fadeIn');
setTimeout(function(){$('.hidden.fadeIn').addClass('do');},10);

很遗憾，除非您必须使用 setTimeout。如果你不这样做，两个类的变化将同时被解释并且不会发生动画。

编辑

如果您修改 hidden 类的规则，您可能可以使用更少的代码：

.hidden{
    display: none;
    opacity:0;
    visibility:hidden;
    -webkit-transition: all 1s;
    -moz-transition: all 1s;
    -ms-transition: all 1s;
    -o-transition: all 1s;
    transition: all 1s;
}
.hidden.fadeIn{
    display: block;
    opacity:1;
    visibility:visible;
}

现在你只有 1 个类可以用 JS 添加：

function fade(){
    $('.hidden').addClass('fadeIn');
}
setTimeout(fade,10);

【讨论】：

感谢您的详细回答。稍后会检查。 CSS 过渡看起来很有希望。

【解决方案5】：

为什么不能使用$('.hidden').fadeIn(1500)？

JSFiddle

【讨论】：

因为它将内联样式设置为display: block，这在我的设置中是错误的。我会更新问题，让它更具体。