.delay（）只適用於第一個動畫

我已經寫了一個簡單的jQuery淡入淡出插件，但我無法正常工作延遲。這將工作中的第一項，但隨後被後.delay（）只適用於第一個動畫

jQuery的

(function ($) { 
    $.fn.setupQuoteFade = function (options) { 
     options = $.extend({ 
      fadeSpeed: 600, 
      fadeDelay: 5000 
     }, options); 

     return $(this).each(function() { 
      var quoteHolder = $(this), 
       quotes = quoteHolder.children('p'), 
       fadeIndex = 0; 

      fade(); 

      function fade() { 
       quotes.eq(fadeIndex) 
        .stop() 
        .delay(options.fadeDelay) 
        .animate({ opacity: 0 }, options.fadeSpeed, function() { 
         fadeIndex++; 
         if (fadeIndex == quotes.length) { 
          fadeIndex = 0; 
         } 

         quotes.eq(fadeIndex).stop().animate({ opacity: 1 }, options.fadeSpeed, function() { 
          fade(); 
         }); 
        }); 
      } 
     }); 
    }; 
})(jQuery);

Example

忽略，因爲你可以從例子中看到，它在開始動畫之前等待5秒淡出，但之後每次通話立即發生，而不是等待5秒鐘。

我曾嘗試在各個地方添加諸如.clearQueue()之類的東西，或者將queue: true添加到動畫選項 - 在後面的情況下，它會停止發生第二個項目的褪色。

我知道我可以在淡入淡出功能使用setTimeout但我想

編輯

繼多米尼克的意見，通過移除.stop()理解爲什麼.delay()還不行允許plugin to work正確閱讀有關停止，我認爲你能夠傳遞一個布爾值來告訴它清除隊列，並因此允許延遲正常工作 - 例如.stop(true).delay(5000)，但它不。

所以我想這個問題是在.stop()什麼是從工作停止.delay()，我怎麼就能夠讓他們一起工作（以供將來參考，因爲我可能需要使用的延遲與懸停動畫停止）

來源

2014-07-01 Pete

只是一個快速的想法，而不是一個答案：似乎與褪色有關。將其設置爲5000，它看起來更像是你想要達到的目標。 – Dominik

@Dominik我有這個使用setTimeout的解決方案，但我只想知道爲什麼延遲不起作用，而不是有一個解決方法 – Pete

嗡嗡聲，我知道這一點。只是一個想法，可能會帶來某人正確的答案......順便說一句，另一個：在你的淡入淡出方法中刪除兩個stop（） - 調用，並在完成第二個「動畫」之前添加延遲（options.fadeDelay）處理程序導致預期的行爲（據我所知）。只是做了一個試驗和錯誤=> http://jsfiddle.net/StF6f/ – Dominik

還有另一個選項來實現與setTimeout javascript函數的延遲。而不是僅調用fade（），請調用setTimeout並通過fade（）和options.fadeDelay作爲參數。這裏是一個example fiddle：

setTimeout(fade, options.fadeDelay);

希望這有助於！

更新：哎呀，對不起。在描述中沒有看到關於setTimeout的評論。

來源

2014-07-04 15:50:08 yofferHorist

.delay（）只適用於第一個動畫

回答

相關問題