Question

我想通过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'); 
    }); 
});

（注意：如果使用 var $data = ... 并且 $data.doStuff() 实际上有效，我不是百分百确定 - 如果是它可以避免每次都在DOM树中查找div，但如果没有，只需删除第一行并在任何地方使用 $('#data') ...... / em>的

Answer 2

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

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

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

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

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

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

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

2 个答案: