Question

当用户点击一个按钮时，它会调用一个在body标签后创建div的函数，显示它然后在1秒后将其淡出。但是我如何删除（）这个div并保留fadeOut动画？

我试过了：

function myFunc(){
    jQuery('body').prepend("<div class='myDiv'>Hello World!</div>");
    $( ".myDiv" ).show( "slow", function() {});
    setTimeout(function() {
        $('.myDiv').fadeOut('fast');
        $(".myDiv").remove();
    }, 1000);

}

但是这个解决方案并没有保留fadeOut动画。：（

Answer 1

而不是

setTimeout(function() {
        $('.myDiv').fadeOut('fast');
        $(".myDiv").remove();
    }, 1000);

尝试使用

$('.myDiv').fadeOut(1000, function(){
     $(this).remove();
});

Answer 2

$('.myDiv').fadeOut('fast', function() {
        $(".myDiv").remove();
});

动画完成后调用该函数。

Answer 3

删除div。

的回调中的$.fadeOut()

另外，我建议在setTimeout()的回调中运行$.show()，这样您就可以确保所有操作的顺序。

$(function() {
  var $div,
      onShow,
      onHide;
  
  $('body').prepend("<div class='myDiv'>Hello World!</div>");
    
  $div = $(".myDiv");
  
  onShow = function() {
    setTimeout(function() {
      $div.fadeOut('fast', onHide);
    }, 1000);
  };
  
  onHide = function() {
    $div.remove();
  };

  $div.show("slow", onShow);
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>

Answer 4

您可以执行以下操作

setTimeout(function () {
    $('.myDiv').fadeOut('slow', function(){
        $(this).remove();
    });
}, 1000);

如何在fadeOut / setTimeout之后删除（）div

4 个答案: