3

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

使用：

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

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

4

2 回答 2

7

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

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

（注意：我不能 100% 确定是否使用 var $data = ... 以及 $data.doStuff() 是否会实际工作 - 如果确实如此，它可以让您不必每次都在 DOM 树中查找 div，但如果没有，只需删除第一个线和使用 $('#data') 无处不在...

于 2009-10-11T13:02:42.433 回答
3

问题与所有三个函数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 定义为内联匿名函数。

于 2009-10-11T13:18:57.370 回答