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

我有这段代码：

    $('#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请求之前）。

我想问一下如何同时触发淡出和ajax请求，以及仅在ajax请求完成后才能进行淡入。

最佳答案

您只需在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);
          });
}

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