Question

问题：

我有一个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')

Answer 1

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

使用您的HTML＆amp; 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
           }
    );

Answer 2

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

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

Answer 3

你删除了那个需要淡化它的类

你可以试试这个 Example

HTML

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

JS

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

Answer 4

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

JSFiddle

Answer 5

如果您需要在现代浏览器中运行此动画，请使用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; }

现在你只用JS添加了一个类：

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

当类使用jQuery更改时，如何向元素的css属性添加动画？

5 个答案: