Question

我有这段代码：

    $('#contentSites').fadeOut(200, function() {
        // Animation complete
            $.get("my_account_content.php?q=" + content, function(data){
                $("div#contentSites").html(data);
                $('#contentSites').fadeIn(200);
});

我有2个按钮可以激活ajax请求并更改#contentSites的全部内容 - 现在它一个接一个地做3件事（只执行下一个，直到完成上一个）。它这样做： 1.淡出当前内容 2.获取新内容 3.淡出新内容。

因为这不是很高效（因为我需要等到ajax请求之前发生淡出）。

我想问一下如何同时触发fadeout和ajax请求，并且只有在ajax请求完成后才能执行淡入。

Answer 1

您只需删除fadeOut

上的回调即可

$('#contentSites').fadeOut(200);
$.get("my_account_content.php?q=" + content, function(data){
    $("div#contentSites").html(data);
    $('#contentSites').fadeIn(200);
});

使用jQuery defferds执行此操作的另一种方法是

$.when( $('#contentSites').fadeOut(200), get_content() ).then(function(){ 
    $('#contentSites').fadeIn(200);
}); 

function get_content(){
   return $.get("my_account_content.php?q=" + content, function(data){
             $("div#contentSites").html(data);
          });
}

这将确保fadeIn仅在两者 ajax请求和 fadeOut完成后运行，同时同时运行两者。

Answer 2

也许这就是：

$('#contentSites').fadeOut(200);

$.get("my_account_content.php?q=" + content, function(data){
    $("div#contentSites").html(data);
    $('#contentSites').fadeIn(200);
});

如何同时创建ajax请求和背景动画

2 个答案: