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 的位置以报告所有错误（并且数据很好地进入数据库），但我得到的只是我期望的内容，但容器保持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指出的。当你将其淡出。您现在只需加载数据并将其淡入即可。

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

Answer 3

不要链接到 http://code.jquery.com/jquery-latest.js 来自使用加密 (HTTPS) 的页面。在本地托管代码。