jquery - 在 jQuery 中延迟 CSS

Question

我有这个 div 我想display:none在它淡出后隐藏（），所以我输入：

$('.element').click(function(){
    $(this).animate({opacity:"0"},{duration:200});
    $(this).delay(200).css('display','none');
});

我突然想起 delay()s 不适用于 css。我曾经有一个小的 setTimeout 解决这个问题，但在任何地方都找不到它，所以我尝试了这样的随机东西：

$('.element').click(function(){
    $(this).animate({opacity:"0"},{duration:200});
});
$('.element').click(function(){
    setTimeout(function(){
        $(this).css('display','none');
    },200);
});

还是不行。有人可以帮我吗？

Answer 1

jQuery 的 .animate() 具有回调功能，您可以在动画完成后发送一个匿名函数来执行：

$(this).animate({opacity:"0"},{duration:200}, function(){
   $(this).css('display','none');
});

来源：jQuery 动画

Answer 2

使用动画回调函数，该函数将在动画完成时初始化。

结构是这样的 = .animate( properties [, duration] [, easing] [, complete] )

例子：

$('.element').click(function(){
    $(this).animate({opacity:"0"},200,function() {//use callback here
       $(this).css('display','none');
    });
});

Answer 3

一种更优雅的方法是指定一个回调函数在动画之后运行。

例如：

$(this).animate({opacity:"0"},200,function(){

     $(this).css('display','none');

});

Answer 4

$('.element').fadeOut('slow', function() {
    // Animation complete. do something here if you want
 });