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），但我得到的只是我期望的内容，但容器保持{{1} 1}}。如果我删除了淡入淡出，一切正常：/

我也试过这个无济于事：

display:none

Answer 1

尝试添加.stop(); see reference here

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。在本地托管代码。

JQuery AJAX成功+淡入淡出

3 个答案: