Question

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

即

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(); 
});

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

slideUp docs

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()。

jQuery按顺序执行操作

3 个答案: