我试图在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加载程序出现同样的问题。事实上它也没有加载。
答案 0 :(得分:7)
empty
不是动画套件的一部分,因此它不使用动画队列。通过empty
的返回值调用slideUp
,您可以立即将其称为 (例如,与next
一样,返回值来自closest
)。那不是回调,这只是一个链式电话。
您必须使用slideUp
提供的回调选项:
$(this).closest(".feed").next(".feed_expand").slideUp(300, function() {
$(this).empty();
});
只有animation (effects) suite中的函数知道并使用队列。
以下是一个例子: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>
答案 1 :(得分:0)
.promise().done()
是你的朋友:)
$(this).closest(".feed").next(".feed_expand").slideUp(300).promise().done(function(){
$(this).empty();
});