Nivo滑块浏览器/选项卡/窗口模糊/焦点

Question

JS新手vs Nivo滑块。

导致问题的操作:用户切换到不同的选项卡或窗口

问题:Nivo滑块继续在后台运行。在返回标签/窗口时，我的自定义动画(添加到jquery.nivo.slider.js)失去控制。

我的简单动画的例子:

$('#element').animate({"top": "0px"}, "slow");

我已经想出了解决方案，我会把它贴出来供成员们改进。

谢谢!

Answer 1

当你转到另一个选项卡时(例如，通过onclick事件)，你不能停止滑块，然后当你返回到初始选项卡时继续运行吗?

$('#slider').data('nivoslider').stop(); //Stop the Slider
$('#slider').data('nivoslider').start(); //Start the Slider

Answer 2

这是一个对我有效的解决方案。如果有什么我能做得更好的，请告诉我。谢谢!

if (/*@cc_on!@*/false) { // check for Internet Explorer
document.onfocusin = function() {
        vars.paused = false;
        //Restart the timer
        if(timer == '' && !settings.manualAdvance){
            timer = setInterval(function(){ nivoRun(slider, kids, settings, false); }, settings.pauseTime);
        }
    }
document.onfocusout = function() {
            vars.paused = true;
            clearInterval(timer);
            timer = '';
        }
} else {
window.onfocus = function(){
        vars.paused = false;
        //Restart the timer
        if(timer == '' && !settings.manualAdvance){
            timer = setInterval(function(){ nivoRun(slider, kids, settings, false); }, settings.pauseTime);
        }
    }
window.onblur = function(){
        vars.paused = true;
        clearInterval(timer);
        timer = '';
    }

}