jQuery 按顺序做事

Question

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

即

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

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

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

希望你能帮忙。

Answer 1

.html() 未排队（它会立即发生，独立于fx 队列），因此可以使用 .slideUp()< /code>回调，如下所示：

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

一旦 .slideUp() 完成，就会调用 .html().slideDown()。 或者 .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()完全的。

Answer 2

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

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

slideUp 文档

Answer 3

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

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

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

http://api.jquery.com/动画/