.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（）只适用于第一个动画

回答

相关问题