Question

我试图使用以下代码执行淡入淡出的幻灯片演示：

function slideSwitch() {
    var $active = $('#slideshow IMG.active');

    if ( $active.length == 0 ) $active = $('#slideshow IMG:last');

    var $next =  $active.next().length ? $active.next() : $('#slideshow IMG:first');

    $active.addClass('last-active');

    $next.css({opacity: 0.0})
    .addClass('active')
    .animate({opacity: 1.0}, 1000, function() {
        $active.removeClass('active last-active');
    });
}

$(function() {
    setInterval( "slideSwitch()", 5000 );
});

现在这项工作对我来说非常适合我（好的safari，firefox和IE），但Chrome的行为非常令人烦恼和奇怪。如果我在另一个选项卡上或已将窗口最小化了一段时间，并且我返回选项卡，则幻灯片显示将在一段时间内停止正常工作（取决于选项卡未被查看的时间长度）并且会闪烁而不能正常改变。就好像它在选项卡不在视图中时停止执行该功能，当它返回到视图中时，它会推出在选项卡不在视图范围内时应该执行的所有操作（虽然不正确）。

你可以自己尝试here。我还上传了一段视频here。

这只发生在Chrome中，而另一件事是它发生了我尝试过的2个脚本，但脚本页面上的演示工作正常。这两个脚本是：

http://jonraasch.com/blog/a-simple-jquery-slideshow 和 “一个简单的淡入淡出幻灯片”

为什么Google Chrome在更改标签后无法正常执行连续淡入淡出功能？

0 个答案: