javascript - jQuery类发生变化时，如何给元素的css属性添加动画？

Question

问题:

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

限制

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

问题:

How to make the changes to be animated (have a duration > 0) when I remove(change) the class of the HTML element?

代码:

CSS:

.hidden{
display: none;
}

HTML

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

JS

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

Answer 1

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

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

$('.hidden').css({ // Change your CSS directly to
    display: 'inline', // the display you want
    opacity: 0 // 100% transparent
})
.stop() // Recommended because it pauses any previous animation so there is no conflict between two animations simultaneously
.animate({ // Will change your CSS over time
    opacity: 1 // 100% opaque
}, 2000, // in 2 secs
function(){
    var $this = $(this)
    $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
});