Question

我有一个简单的jQuery图像推子，只是循环图像进出焦点。

这是一支笔：http://codepen.io/designsoutheast/pen/xbqjZL

这是褪色背后的代码：

        $('img.bgfade').hide();
          function anim() {
              $(".slider img.bgfade").first().appendTo('.slider').fadeOut(1000);
              $(".slider img").first().fadeIn(10);
             setTimeout(anim, 3500);
          }
          anim();
        });

它工作正常，但当窗口或标签失去焦点一段时间后，我回到它，动画排队并闪烁不同的图像/狂暴直到它赶上来。

我尝试过使用jQuery可见性插件，但还是无法使用它。我也尝试过使用标准（窗口）.blur ..但我不确定如何在此期间正确停止动画。我试过clearTimeout，但我觉得我做错了。这是我尝试过的：

        var faderVar;

          function anim() {
              $(".slider img.bgfade").first().appendTo('.slider').fadeOut(1000);
              $(".slider img").first().fadeIn(10);
             faderVar = setTimeout(function() {anim}, 3500);
          }
          function stopFader() {
            clearTimeout(faderVar);
          }
          anim();

$（window）.focus（function（）{

        var faderVar;

          function anim() {
              $(".slider img.bgfade").first().appendTo('.slider').fadeOut(1000);
              $(".slider img").first().fadeIn(10);
             faderVar = setTimeout(function() {anim}, 3500);
          }
          function stopFader() {
            clearTimeout(faderVar);
          }
          anim();
        });

$（window）.blur（function（）{

          stopFader();

}）;

我认为我在正确的轨道上，但我对jQuery很新，我很确定clearTimeout写错了。我希望有人可以帮忙！

Answer 1

创建一个名为'animating'（等）的新布尔变量，并在'var faderVar'后面设置为false。清除$（window）.focus（）函数并将其替换为：

$(window).focus(function() {
    if(!animating) {
        anim();
    }
});

在anim（）函数中设置animating = true，在stopFader（）函数中设置animating = false。所以每次你关注$（窗口）时，都会检查anim（）是否在运行，是否启动了anim（）函数。

当窗口失去焦点时，jQuery图像推子不会停止

1 个答案: