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

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 请求之前发生淡出)。

我想问如何同时触发淡出和ajax请求，并且仅当ajax请求完成时才进行淡入。

Answer 1

您只需删除淡出时的回调

$('#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 请求和完成后运行，同时运行两者。