動畫完成前的jquery回調調用

-1

我想在slideUp之後清空div，但在完全滑動之前它變空。這是我的代碼。我需要清除的數據正在通過Ajax進行。這裏是完整的代碼動畫完成前的jquery回調調用

 $('.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加載程序發生同樣的問題。事實上它也沒有加載。

來源

2013-05-05 user1223654

建議：http://jsbeautifier.org一致，清晰的代碼縮進和括號的地理位置使得代碼*大幅*易於閱讀，維護和調試。做一些事情會很糟糕，會讓你花費時間和麻煩，並且很難讓人們幫助你。 – 2013-05-05 11:02:59

empty不是動畫套件的一部分，因此它不使用動畫隊列。通過撥打empty從slideUp返回值，您可以立即稱其爲（例如，您使用next的方式，返回值爲closest）。這不是一個回調，這只是一個鏈接的電話。

你必須使用回調選項slideUp規定：在animation (effects) suite

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

只有功能瞭解和使用隊列。

下面是一個例子：Live Copy | Live Source

<!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-05 08:32:35

我試過了。沒有運氣 – user1223654 2013-05-05 08:35:19

它甚至沒有清空容器 – user1223654 2013-05-05 08:38:20

@ user1223654：上面的**沒有**工作：http://jsbin.com/oyidex/1（來源：http://jsbin.com/oyidex/1/edit）。所以問題在於其他地方，在你沒有顯示的代碼中。查看JavaScript控制檯，並通過調試器逐步跟蹤代碼（如果瀏覽器沒有，則切換到更新的代碼）。 – 2013-05-05 08:39:15

.promise().done()是你的朋友:)

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

來源

2013-05-05 08:52:10 Steven

'slideUp' * *已經*提供了一個回調，你不需要跳過箍環來得到一個。 – 2013-05-05 08:53:51

嗯......是的:)我剛剛懶得使用這種方法後很多次 - – Steven 2013-05-05 08:57:01

代碼更新。請現在看看 – user1223654 2013-05-05 10:00:40

動畫完成前的jquery回調調用

回答

相關問題