-1

我试图在 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; }
                });

ajax 加载器也会出现同样的问题。事实上它也没有加载。

4

2 回答 2

7

empty不是动画套件的一部分，因此它不使用动画队列。通过调用emptyfrom 的返回值slideUp，您会立即调用它（next例如，在 from 的返回值上调用它的方式closest）。这不是回调，这只是一个链式调用。

您必须使用slideUp提供的回调选项：

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

只有动画（效果）套件中的函数知道并使用队列。

这是一个示例：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>
于 2013-05-05T08:32:35.557 回答
0

.promise().done()是你的朋友 ：）

$(this).closest(".feed").next(".feed_expand").slideUp(300).promise().done(function(){
  $(this).empty();
});
于 2013-05-05T08:52:10.233 回答