我的jquery動畫在ajax調用後不工作

我想讓我的動畫在ajax調用完成後工作。它在用戶登錄頁面時工作正常。但是，如果用戶導航回首頁，動畫將不會運行。我對Jquery很新，你能給我一些提示嗎？我的jquery動畫在ajax調用後不工作

我認爲它有關於.on的事情，但我不確定如果是這樣的語法。任何幫助將不勝感激。

這是代碼：

<script type="text/javascript"> 
(function() { 

    var quotes = $(".quoteName"); 
    var quoteIndex = -1; 

    function showNextQuote() { 
     ++quoteIndex; 
     quotes.eq(quoteIndex % quotes.length) 
      .fadeIn(3000) 
      .delay(12000) 
      .fadeOut(3000, showNextQuote); 
    } 
    showNextQuote(); 
})(); 
</script>

來源

2014-03-02 user3370516

在執行完AJAX請求後，您是否調用showNextQuote（）？ –

粘貼這裏代碼你附加.on回調。你也使用什麼jQuery版本？ – MattSkala

至於我可以看到你有一個立即調用函數表達式：

(function() { 

})();

你把裏面的每一個變量和函數聲明（如showNextQuote()）會不能從其他功能之外訪問。其他

(function() { 
    function showNextQuote(arg) { 
     alert(arg); 
    } 
    showNextQuote('A'); 
})(); 

showNextQuote('B'); // ReferenceError: showNextQuote is not defined

的一件事是你var quotes = $(".quoteName");選擇可能會沒有結果導致DOM還沒有準備好被JS和jQuery的解析趕上你的元素。

jQuery(function($) { // DOM is now ready and the $ alias secured. 

    var quotes = $(".quoteName"); 
    var quoteIndex = -1; 

    function showNextQuote() { 
     ++quoteIndex; 
     quotes.eq(quoteIndex % quotes.length).fadeIn(3000).delay(12000) 
              .fadeOut(3000, showNextQuote); 
    } 
    showNextQuote(); 

    // other functions here 

    $('selector').on('some event', 'dynamicSelector', function(){ 
      showNextQuote(); // will work 
      // other stuff here?... 
    }); 

});

另一個提示是，如果您需要用新元素的DOM，你可能要重新抓住他們更新quotes.length

來源

2014-03-02 11:44:06

真棒thanx傢伙你已經蜜蜂一個很大的幫助:) – user3370516

看來，當你作出這樣的AJAX調用，更新（我的意思是刪除引用對象中包含的當前DOM節點並創建新節點）。如果你這樣做，當你引用引用對象中的節點時，什麼都不會發生，因爲它們不再屬於你所看到的DOM。 jQuery對象沒有「實時更新」，它們不會更改以反映DOM中的更改。你需要的是你的AJAX請求完成後，再次撥打這個電話，及時更新報價對象：

quotes = $('.quoteName');

當然，你的「報價」對象不是全局的，所以你可能無法更新如果您的AJAX調用不在您定義您發佈的代碼的匿名函數的範圍內。

來源

2014-03-02 11:45:47

真棒thanx傢伙你已經蜜蜂一個很大的幫助:) – user3370516

我的jquery動畫在ajax調用後不工作

回答

相關問題