-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はアニメーション スイートの一部ではないため、アニメーション キューを使用しません。emptyからの戻り値で呼び出すことにより、すぐにslideUp呼び出します(たとえば、からの戻り値での方法)。これはコールバックではなく、単なる連鎖呼び出しです。nextclosest

slideUp以下を提供するコールバック オプションを使用する必要があります。

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

アニメーション (エフェクト) スイートの関数のみがキューを認識して使用します。

以下に例を示します。ライブソース

<!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 に答える