Question

我有一个小提琴设置，但我需要扩展它，我已经尝试并且彻夜失败，所以我已经完成了所有的尝试并且离开了主要部分。请看这个小提琴。

我想知道如何将整个动画“循环”为无限，但最重要的是能够在鼠标输入时暂停动画或悬停任何一个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);

Answer 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();
     })

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

1 个答案: