Jquery循环动画并在悬停时冻结答案

【问题标题】：Jquery loop animation and freeze on hoverJquery循环动画并在悬停时冻结
【发布时间】：2013-04-07 12:14:55
【问题描述】：

我有一个小提琴设置，但我需要扩展它，我已经尝试了一整晚但都失败了，所以我已经剥离了所有的尝试，只留下了主要部分。请看这个小提琴。

我想知道如何“循环”整个动画无限，但最重要的是能够在鼠标进入或悬停任何一个 div 时暂停动画，然后在 mouseout 时继续动画或单击该链接将链接到页面外。

**如果这是可能的（不确定）我很想随机化 div 出现的时间，但总是可见 1/2 秒？ ] 下面的小提琴代码..

 $('#one').delay(2000).fadeIn(200);
 $('#one').delay(500).fadeOut(200);

 $('#two').delay(3000).fadeIn(200);
 $('#two').delay(500).fadeOut(200);

 $('#three').delay(4000).fadeIn(200);
 $('#three').delay(500).fadeOut(200);

 $('#four').delay(5000).fadeIn(200);
 $('#four').delay(500).fadeOut(200);

 $('#five').delay(6000).fadeIn(200);
 $('#five').delay(500).fadeOut(200);

 $('#six').delay(7000).fadeIn(200);
 $('#six').delay(500).fadeOut(200);

【问题讨论】：

更新为包含循环，只需要知道如何在悬停在任何 div 上时暂停动画...
jsfiddle.net/bloodygeese/nqQG9/1

标签： jquery animation hover

【解决方案1】：

以下代码随机淡化元素并在鼠标悬停时暂停淡化效果。 它要求您为所有元素添加“box”类。

    $(function () {
        function fadeAll() {
           var id = 1 + parseInt(Math.random() * 5) % 5;
           $('.box:nth-child('+id+')').stop().delay(500+parseInt(Math.random() * 500)).fadeIn('fast', function () {
              $(this).stop().delay(500 +parseInt(Math.random() * 500)).fadeOut('fast');
           })
           window.timeout = window.setTimeout(fadeAll, 500);
        }

        $('.box').hover(function(){
           $(this).css('opacity', 1);
           window.clearTimeout(window.timeout);
           $('.box').stop();
        },function(){
           $('.box').fadeOut('fast');
           window.timeout = window.setTimeout(fadeAll, 500);
        });

        fadeAll();
     })

【讨论】：