如何在fadeOut / fadeIn之前完成jQuery load（）？

我想通过jQuery load（）进行AJAX调用，只有一次返回，然后fadeOut旧内容并淡入新内容。 我希望旧内容保持显示，直到检索到新内容，此时触发淡出/输入。

使用：

$('#data').fadeOut('slow').load('/url/').fadeIn('slow'); 

内容淡入和淡出，稍后load（）调用返回，数据更新，但淡入淡出已经完成。

Answer 1

使用回调来控制调用的顺序。

 var $data = $('#data'); $data.fadeOut('slow', function() { $data.load('/url/', function() { $data.fadeIn('slow'); }); }); 

（注意：我不是100％确定如果使用 var $data = ... 和 $data.doStuff() 实际上会工作 – 如果确实如此，它将使您不必每次都在DOM树中查找div时间，但如果没有，只需删除第一行并使用 $('#data') 到处……

Answer 2

问题与以下事实有关：fadeOut，load和fadeIn都是异步的。 上述每个函数都接受一个回调参数（一个函数），它将在函数执行完毕后运行。 例如

 $('#data').fadeOut(functionToRunWhenFadeOutIsComplete); 

//如果您定义了’functionToRunWhenFadeOutIsComplete’，它将在fadeOut结束后运行。

有了这些知识，您现在可以解决您的问题。

 var fadeInData = function fadeInData() { $('#data').fadeIn(); } var loadData = function loadData() { $('#data').load('url', fadeInData); } $('#data').fadeOut(loadData); 

或者，您可以将loadData，fadeInData定义为内联匿名函数。