如何让 jQuery load() 在淡出/淡入之前完成？答案

【问题标题】：How can I get jQuery load() to complete before fadeOut/fadeIn?如何让 jQuery load() 在淡出/淡入之前完成？
【发布时间】：2009-10-11 12:59:14
【问题描述】：

我想通过 jQuery load() 进行 AJAX 调用，并且只有在它返回时，然后淡出旧内容并淡入新内容。我希望旧内容一直显示，直到检索到新内容，此时会触发淡出/淡入。

使用：

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

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

【问题讨论】：

标签： jquery fadein fadeout

【解决方案1】：

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

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

（注意：我不能 100% 确定是否使用 var $data = ... 和 $data.doStuff() 确实有效 - 如果有效，它会节省您不必每次都在 DOM 树中查找 div，但如果没有，只需删除第一行并使用 $('#data') everywhere...

【讨论】：

上面的 $data 变量将在其他匿名函数中可用。
你是说我在底部的免责声明可以去掉？ =)

【解决方案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 定义为内联匿名函数。

【讨论】：