JQuery AJAX成功+淡入淡出

Question

我正在使用AJAX将调查内容加载到页面上的容器中，并且在过渡期间，我淡出容器并在完成后淡入淡出。 它适用于第1-4页，但停止为第5页工作。内容加载第5页，但容器不会淡入。

success: function(data){
    $("div#surveyContainer").fadeOut(function(){
        $("div#surveyContainer").html(data).hide().fadeIn();
    }); // end fadeout
}

在第5页的任何地方都没有提到surveyContainer 。我能想到的是有些东西超时导致fadeIn没有被触发。 加载时间约为36ms。 我将php脚本设置为发送data以报告所有错误的位置（并且数据正好进入Db），但我得到的只是我期望的内容，但容器保持display:none 。 如果我删除了淡入淡出，一切正常：/

我也试过这个无济于事：

success: function(data){
    $("div#surveyContainer").fadeOut(function(){
        $("div#surveyContainer").html(data);
        $("div#surveyContainer").fadeIn();
    }); // end fadeout
}

Answer 1

尝试添加.stop(); 请参考这里

success: function(data){
    $("div#surveyContainer").fadeOut(function(){
        $(this).html(data).stop(true, true).fadeIn();
    }); // end fadeout
}

这应该停止当前正在发生的任何动画，强制它们直接到它们的结束点（它们动画到的地方）并清除动画队列。 你也可以这样摆脱hide() 。

另外，你可以在回调中使用this ，好吧，我不知道为什么。 但是你可以。

Answer 2

不知道为什么它会破坏单个页面。

也许你可以在.hide()的回调中尝试它：

$("div#surveyContainer").html(data).hide('slow', function(){
    $(this).fadeIn();
});

正如Interstellar_Coder指出的那样。 当你淡出它时，你已经隐藏了div#surveyContainer 。 您现在只需要加载数据并淡入其中。

success: function(data){
    $("div#surveyContainer").fadeOut(function(){
        $(this).html(data).fadeIn(); // Removed the .hide()
    }); // end fadeout
}

Answer 3

不要使用加密（HTTPS）从页面链接到http://code.jquery.com/jquery-latest.js 。 在本地托管代码。