动画完成前的jquery回调调用

Question

动画完成前的jquery回调调用

我试图在slideUp之后清空一个div,但它在完全向上滑动之前变空了.这是我的代码.我需要清除的数据正在通过Ajax获取.这是完整的代码

        $('.more').click(function(e){
                    e.preventDefault();

                    var fd = $(this).attr('id');
                    var data = 'fd='+ fd ;

                    if($('#e_' + fd).is(':visible')){
                      $('#e_' + fd).slideUp(300, function() {
                            $('#e_' + fd).empty();

                        });

                        }
                    else{


    $('#e_' + fd).empty().append('<div class="load"></div>').slideDown(300); // for ajax loader


                    $.ajax({
                        type: "POST",
                        url: "file.php",
                        data: data,

                        cache: false,
                        success: function(html)
                        {

                        $('#e_' + fd).empty().append(html).slideDown(800);

                          }
                         });

                      return false; }
                });

Run Code Online (Sandbox Code Playgroud)

使用ajax加载程序会出现同样的问题.事实上它也没有加载.

Answer 1

T.J*_*der 7

empty不是动画套件的一部分,所以它不使用动画队列.通过调用empty返回值slideUp,您可以立即调用它(next例如,使用返回值的方式closest).这不是一个回调,这只是一个链式电话.

您必须使用slideUp提供以下内容的回调选项:

$(this).closest(".feed").next(".feed_expand").slideUp(300, function() {
    $(this).empty();
});

Run Code Online (Sandbox Code Playgroud)

只有动画(效果)套件中的函数知道并使用队列.

这是一个例子:Live Copy | 直播源

<!DOCTYPE html>
<html>
<head>
<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
<meta charset=utf-8 />
<title>JS Bin</title>
  <style>
    .feed_expand {
      height: 10em;
      border: 1px solid black;
    }
    .feed {
      border: 1px solid black;
      margin-bottom: 3px;
    }
  </style>
</head>
<body>
  <div class="feed">
    <div class="clicker">Click me</div>
  </div>
  <div class="feed_expand">
    I'm the feed_expand, I have content
  </div>
  <script>
    $(".clicker").click(function() {
      $(this).closest(".feed").next(".feed_expand").slideUp(300, function() {
        $(this).empty();
      });

      // Show the expand again a second later
      var self = this;
      setTimeout(function() {
        $(self).closest(".feed").next(".feed_expand").slideDown();
        $("<p>").html("As we can see, the content in feed_expand has been removed").appendTo(document.body);
      }, 1300);
    });
  </script>
</body>
</html>

Run Code Online (Sandbox Code Playgroud)

归档时间：	12 年，6 月前
查看次数：	132 次
最近记录：	12 年，6 月前