Question

我的自定义滑块脚本存在错误。当我在页面上一切顺利，但是当我打开另一个标签并浏览一分钟左右，然后回到我的页面时，我的脚本变得疯狂......脚本非常简单。

Here is Jsfiddle - 滑块中没有图像，这就是它看起来不太好的原因..

function show12(evt){
$('#number_1').unbind();
$('#number_2').unbind();
// First slide
$('#number_1').css({
    position: 'absolute',
    top: '9px',
    left: '10px',
}).effect('slide', {
    direction: 'left',
    mode: 'show'
}, 'slow');

$('#slide_1').css({
    position: 'absolute',
    top: '9px',
    left: '47px',
}).effect('slide', {
    direction: 'left',
    mode: 'show'
}, 'slow');

// Second slide
$('#number_2').css({
    position: 'absolute',
    top: '9px',
    left: '445px',
}).effect('slide', {
    direction: 'left',
    mode: 'show'
}, 'slow');

$('#slide_2').css({
    position: 'absolute',
    top: '9px',
    left: '481px',
}).effect('slide', {
    direction: 'left',
    mode: 'show'
}, 'slow');

// Third slide  
$('#number_3').css({
    position: 'absolute',
    top: '9px',
    left: '879px'
}).effect('slide', {
    direction: 'left',
    mode: 'show'
}, 'slow');

$('#slide_3').css({
    display: 'none'
});

// Forth slide  
$('#number_4').css({
    position: 'absolute',
    top: '9px',
    left: '917px'
}).effect('slide', {
    direction: 'left',
    mode: 'show'
}, 'slow');

$('#slide_4').css({
    display: 'none'
});

$('#number_1, #number_2').hover(
    function(){window.clearInterval(timer); i=1;}
);

$('#number_1, #number_2').mouseout(
    function(){
        $(this).unbind();
        timer = window.setInterval(function(){slideLogos();}, 4000); i=1;
    }
);


$('#number_3').hover(function(){$(this).unbind(); i++; show34();});
$('#number_4').hover(function(){$(this).unbind(); i++; show34();});

}

function show34(){
$('#number_3').unbind();
$('#number_4').unbind();

    // First slide
$('#number_1').css({
    position: 'absolute',
    top: '9px',
    left: '10px',
}).effect('slide', {
    direction: 'left',
    mode: 'show'
}, 'slow');

$('#slide_1').css({
    display: 'none'
});

// Second slide
$('#number_2').css({
    position: 'absolute',
    top: '9px',
    left: '48px',
}).effect('slide', {
    direction: 'left',
    mode: 'show'
}, 'slow');

$('#slide_2').css({
    display: 'none'
});

// Third slide  
$('#number_3').css({
    position: 'absolute',
    top: '9px',
    left: '86px'
}).effect('slide', {
    direction: 'right',
    mode: 'show'
}, 'slow');

$('#slide_3').css({
    display: 'inline-block',
    position: 'absolute',
    top: '9px',
    left: '123px',
}).effect('slide', {
    direction: 'right',
    mode: 'show'
}, 'slow');

// Forth slide
$('#number_4').css({
    position: 'absolute',
    top: '9px',
    left: '521px'
}).effect('slide', {
    direction: 'right',
    mode: 'show'
}, 'slow');

$('#slide_4').css({
    position: 'absolute',
    top: '9px',
    left: '558px',
}).effect('slide', {
    direction: 'right',
    mode: 'show'
}, 'slow');

$('#number_3, #number_4').hover(
    function(){window.clearInterval(timer); i=0;}
);

$('#number_3, #number_4').mouseout(
    function(){
        $(this).unbind();
        timer = window.setInterval(function(){slideLogos();}, 4000); i=0;
    }
);

$('#number_1').hover(function(){$(this).unbind(); i++; show12();});
$('#number_2').hover(function(){$(this).unbind(); i++; show12();});
}

function slideLogos(){


switch(i%2){
    case 0:
        show12();
        break;
    case 1:
        show34();
        break;
}
i++;
}

var i = 1;
var timer;

$('document').ready(function(){

show12();

timer = setInterval(function(){slideLogos();}, 4000);

});

Number_n - 数字始终显示在滑块中，Slide_n - 是显示/隐藏的幻灯片，抱歉：）

Answer 1

由于requestAnimationFrame（）的性质，您不应该使用setInterval或setTimeout循环对动画进行排队。

文档建议在元素上使用动画回调或jQuery .queue（）函数。

jQuery Queue()

队列上的这个答案真的很有趣： What are queues in jQuery?

Answer 2

我曾遇到过同样的问题。我不会说剧本很疯狂，因为在我返回页面之前动画似乎被缓存了。我不知道这是否适合你，但对我而言，滑动最终会减慢到正常速度。我也注意到所有浏览器都发生了同样的事情。所以我认为它必须由jQuery引起。当然，恢复到旧版本的jQuery（1.5而不是1.6，如果我没记错的话）问题就消失了。

离开页面几分钟后jQuery多个幻灯片效果bug

2 个答案: