jquery - jQuery按顺序做事

Question

如何根据我的行为让事情顺利有序地进行。

IE

var $content = $("#content");
$content.slideUp().html('');
$conten.html(from_my_ajax_request).slideDown(); 

基本上我已经做了一个ajax请求来放置div#content的内容。

但是运行上面我可以看到代码进来了，但是在 slideDown 接管之前 slideUp 没有完成。我显然希望它是平滑的。

希望你能帮忙。

Answer 1

var $content = $("#content");
$content.slideUp(function() {
  $content.html('');
  $content.html(from_my_ajax_request).slideDown(); 
});

这样，当第一部分完成时，您可以使用回调来触发动画的第二部分。

上滑文档

Answer 2

您可以将回调传递给 slideUp 并让它执行下一步：

http://api.jquery.com/slideUp/

或者您可以使用动画调用：

http://api.jquery.com/animate/

Answer 3

.html()没有排队（它立即发生，独立于fx队列），所以要么使用.slideUp()回调，就像这样：

$("#content").slideUp(function() { 
   $(this).html(from_my_ajax_request).slideDown(); 
});

.html().slideDown()一旦完成，这将调用.slideUp()。或者 .queue()它，像这样：

$("#content").slideUp().queue(function(n) { 
   $(this).html(from_my_ajax_request); n();
}).slideDown();
//or...
$("#content").slideUp().queue(function() { 
   $(this).html(from_my_ajax_request).dequeue();
}).slideDown();

这实际上将.html()调用作为fx队列步骤，并.slideDown()在完成后执行。