jquery - jQuery fadeIn() 可以添加一个类而不是内联样式吗？

Question

运行.fadeIn()jQuery 时会自动将display:block内联添加到选择器中：

$('div').hide().fadeIn();

结果是否可能如下所示：

<div class="active"></div>

而不是这个：

<div style="display:block"></div>

我不想添加/删除任何内联样式。我无法删除该style属性，因为可能已经设置了我无法控制的样式。我只想添加一个类fadeIn()而不是添加内联display:block样式。

Answer 1

您可以尝试添加active类并在完成后清除display样式，fadeIn()如下所示：

$('div').hide().fadeIn(400, function() {
    $(this).css('display', '').addClass('active');
});

这是一个简单的例子：JS Fiddle

Answer 2

是的，您必须先使用 css 来隐藏 div，然后使用过渡和不透明度来显示它。

JSFiddle

HTML

<div></div>

CSS

div {
    background:blue;
    width:100px;
    height:100px;
    opacity:0;

    -o-transition: opacity .6s ease;
    -ms-transition: opacity .6s ease;
    -moz-transition: opacity .6s ease;
    -webkit-transition: opacity .6s ease;
    transition: opacity .6s ease;  

}

div.active {
    opacity:1;
}

Javascript

$('div').addClass('active');