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

我有一段代码：

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

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

因为这不是很高效（因为我需要等到ajax请求消失之前）

---

我想问一下如何同时启动淡出和ajax请求，并且只有在ajax请求完成淡入后才能启动。

您只需删除淡出时的回调即可

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

使用jQuery的另一种方法是

$.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请求和淡出都完成后运行，同时同时运行这两个请求

您只需在淡出时删除回调

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

使用jQuery的另一种方法是

$.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请求和淡出都完成后运行，同时同时运行这两个请求

也许这是：

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

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

也许这是：

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

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

---

但是，如果在淡出完成执行之前内容接收速度非常快怎么办？阿隆，如果你想同步它们，但仍然让它们同时运行，请查看我的编辑。但是如果在淡出完成执行之前内容接收速度非常快怎么办？阿隆，如果您想同步它们，但仍让它们同时运行，请查看我的编辑。