我正在某些盒子上创建一个自动翻转效果(在鼠标悬停时停止)。我有这段代码:
// 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);
}
);
这很好用。但我想让所有的盒子翻转开始翻转不同的时间,而不是所有的同时(尽管我希望翻转间隔保持不变)。我怎样才能做到这一点?我试着玩超时和间隔,但没有运气......有什么帮助吗?谢谢!
答案 0 :(得分: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%,而是让您了解自己需要做什么。