自动随机翻转

Question

我正在为某些框（鼠标悬停时停止）创建自动翻转效果。我有这个代码：

// Global flipping effect hooks
var flip_hook;
var delay;

// Flip and unflip panels
function startFlip() {
    $('div#front-page-mosaic .front-box.flip').find('div').stop().rotate3Di('flip', 500, {direction: 'clockwise', sideChange: mySideChange});
    delay = setTimeout( function() {
        $('div#front-page-mosaic .front-box.flip').find('div').stop().rotate3Di('unflip', 500, {sideChange: mySideChange});
    }, 8500);
}

// Autostart flipping effect
delay = setTimeout( function() {
    startFlip();
    flip_hook = setInterval(function(){ startFlip(); }, 17000);
}, 8000);

// Stop the flipping effect 
function stopFlip() {
    clearInterval(flip_hook);
    clearTimeout(delay);
}

// Stop flipping on mouse hover, restart on mouse leave
$('div#front-page-mosaic .front-box.flip').hover(
    function () {
        stopFlip();
    },
    function () {
        delay = setTimeout( function() {
            startFlip();
            flip_hook = setInterval(function(){ startFlip(); }, 17000);
        }, 8000);
    }
);

这很好用。但我希望所有的盒子都开始翻转不同的时间，而不是同时翻转（尽管我希望翻转间隔保持不变）。我怎样才能做到这一点？我试着玩超时和间隔，但没有运气......有帮助吗？谢谢！

Answer 1

在你的 startFlip

中尝试这样的事情

var boxes= $('div#front-page-mosaic .front-box.flip').find('div');
    $.each(boxes, function(i, box){
         //(Math.random() * 10) + 1 will random a value between 1 - 10 then * 1000 to get the time in milliseconds
         var time = Math.floor((Math.random() * 10) + 1) * 1000;
         setTimeout(function(){
               $(box).stop().rotate3Di('flip', 500);
         }, time);
     });

JsFiddle 示例：http://jsfiddle.net/3gbksy2t/。它不是 100%，但可以让您了解需要做什么。

自动随机翻转

Auto flip randomly

javascript

random

jquery

flip