Jquery和AJAX。在動畫之間放置一個Ajax調用

Question

首先讓我告訴你，我一個人學習了腳本，所以我的方法肯定有點奇怪。 爲了解釋什麼，我想做的事情，請去這個例子網站我準備：How it should be, kind of!

你會發現，當你按下所有按「展示廳」之後，顯示的鏈接和所有其他menue按鈕的內容主窗口在窗口向下移動之前正在改變。

簡單地說：我想要完成的是窗口向下移動並保持內容直到消失，然後當它從右側出現時應該有新的內容。

當前窗口的內容：「家」 - >按「個人」 - >窗口的內容仍是「家」的 - >下移 - 從右側>自帶的內容從「個人」

這裏是AJAX中的JavaScript部分和動畫

function createRequestObject() 
{ 
    var ro; 
    var browser = navigator.appName; 
    if(browser == "Microsoft Internet Explorer") 
    { 
    ro = new ActiveXObject("Microsoft.XMLHTTP"); 
} 
    else 
    { 
    ro = new XMLHttpRequest(); 
} 
return ro; 

} 

var http = createRequestObject(); 

var katcheck; 

function sndReq(req) 
{ 

    var req2 = req; 

    katcheck = req.slice(0, 1); 

    if (katcheck == "k") 
    { 
    var katid = req2.slice(3,4); 

    http.open('get', 'getkat.php?kat='+katid); 
    } 
    else 
    { 
    $('#videoleft').animate({"top": "1000px"}, { queue:true, duration:600, easing: 'easeInQuad'}) 
       .hide(0).animate({"top": "0px", "left": "800px"},{ queue:true, duration:1}); 

     http.open('get', 'getwork.php?id='+req); 
    } 
http.onreadystatechange = handleResponse; 
http.send(null); 
} 


function handleResponse() 
{ 
    if(http.readyState == 4) 
        { 
        var response = http.responseText; 
        } 

    if (katcheck == "k") 
    { 
       document.getElementById("videomenue").innerHTML = response; 
    } 
    else 
    { 
     $('#videoleft').show(0).animate({"top": "0px", "left":"0px"},{ queue:true, duration:800, easing: 'easeOutBack'}); 

     document.getElementById("post").innerHTML = response; 

    } 
} 

現在好了，我會在sndReq函數開始解釋該部分：

一般menue中的按鈕只是向sndReq發送數字（這是數據庫中的ID）。例如：你按下「Showroom」，然後「k_01」被髮送到同一個sndReq功能。 「k」代表類別，腳本通過切分字符串來告訴它是否是類別請求。

我希望你明白我的意思。

實際上對於Windows來說真是太棒了，其中一箇舊內容向下移動，同時一個新窗口從右側移動到新內容，但是當我嘗試使用兩個窗口test3.php（同一目錄）我得到未定義的問題。

我希望有人能幫助我。非常感謝您

Answer 1

的animate功能是異步的，這意味着你把它和你的代碼繼續，而我發生的動畫執行..

所以問題＃1
您鏈上的隱藏命令該動畫在同一時間，動畫開始隱藏它（這就是爲什麼有盒子的閃光。動畫重新顯示框，並與動畫繼續..）

修復
animate函數也接受參數的回調函數，當動畫結束要執行..

在那裏，是你應該調用你的Ajax代碼，以便它執行後的框出來的畫面..

我相信你的sndReq函數的下列變化將完成這個訣竅。

function sndReq(req) 
{ 

    var req2 = req; 

    katcheck = req.slice(0, 1); 

    if (katcheck == "k") 
    { 
    var katid = req2.slice(3,4); 

    http.open('get', 'getkat.php?kat='+katid); 
    http.send(null); 
    http.onreadystatechange = handleResponse; 
    } 
    else 
    { 
    $('#videoleft') 
     .animate( {"top": "1000px"}, 
        600, 'easeInQuad', 
        function(){ 
           console.log('fetching remote data'); 
           var param = req; 
           http.open('get', 'getwork.php?id='+param); 
           http.send(null); 
           http.onreadystatechange = handleResponse; 
           } // this is the callback function 
       ) 
     .animate(
        {"top": "0px", "left": "800px"}, 
        1, 
        function(){$(this).hide();} 
       ); 

    } 
} 

更新 此外，在handleResponse應的innerHTML設置爲啓動動畫之前的響應..

你也需要在你的HTML結束雙重腳本..看看它，並刪除重複的結束標記..

QueryLoader.init(); 
</script> 

更新2
您在評論中描述的問題發生是因爲您的handleResponse函數被多次調用。這是正常的，因爲readystatechange事件Ajax調用的每一個變化。你需要執行只有當HTTP完成動作（的readyState == 4）發生，沒有任何變化發生..

所以你的代碼應該是最初的內部if語句，避免多次執行..

將其更改爲

function handleResponse() 
{ 
    if(http.readyState == 4) 
     { 
      var response = http.responseText; 

      if (katcheck == "k") 
       { 
       document.getElementById("videomenue").innerHTML = response; 
       } 
      else 
       { 
       $('#videoleft') 
         .show(0). 
         .animate(
            {"top": "0px", "left":"0px"}, 
            { queue:true, duration:800, easing: 'easeOutBack'} 
           ); 
      document.getElementById("post").innerHTML = response; 

       } 
     } 
}