Question

我希望在完成向上滑动后删除html元素。但删除会立即执行。

＆＃13;

$(document).ready(function() {

  $(':button').on('click', function() {
    $("body").prepend("<div class='messageBox'>dsds</div>");
    $(".messageBox").text('You Wot!').slideUp(0).slideDown("slow");

    setTimeout(function() {
      $(".messageBox").slideUp("slow"); //WAIT TILL FINISH THEN....
      $(".messageBox").remove();
    }, 2000);

  });

});

＆＃13;

.messageBox {
  background: blue;
  color: #fff;
  padding: 20px;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<h1>
Settings
</h1>
<h3>
bla bla bla bla
</h3>
<input type="button" value="SAVE" id="save" />
<input type="button" value="ERROR" id="saveE" />

＆＃13;

Answer 1

尝试使用.queue()函数（documentation）：

＆＃13;

$(".messageBox").slideUp("slow").queue(function() {
    var that = $(this);
    that.remove();
    that.dequeue();
});

＆＃13;

.messageBox {
  height:200px;
  border:1px solid #d8d8d8;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.2/jquery.min.js"></script>
<div class="messageBox">box</div>

＆＃13;

或者，如 mplungjan 所述，执行slideUp（）回调函数中的remove函数

Answer 2

试试这个：

setTimeout(function() {

    $(".messageBox").slideUp("slow",function(){

    $(".messageBox").remove();

    })

 }, 2000);

最终代码：

＆＃13;

<!DOCTYPE html>
<html lang="en">
<head>
    
    <style>
        .messageBox {
            
            background: blue;
            color: #fff;
            padding: 20px;
        }
    </style>
    
</head>
    
    <body>
        
        <h1>Settings</h1>
        <h3>bla bla bla bla</h3>
        <input type="button" value="SAVE" id="save" />
        <input type="button" value="ERROR" id="saveE" />
        
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
        <script>
    
       $(document).ready(function() {
           
           $(':button').on('click', function() {
               
               $("body").prepend("<div class='messageBox'>dsds</div>");
               $(".messageBox").text('You Wot!').slideUp(0).slideDown("slow");
               
               setTimeout(function() {
                   $(".messageBox").slideUp("slow",function(){
                       $(".messageBox").remove();

                   })

               },2000);

           })
       })
       
    </script>
    </body>
</html>

＆＃13;

一旦完成，请执行下一个方法

2 个答案: