Question

以下我调用一个函数。该函数等待，然后淡出图像，等待，然后将其淡入。

function fadeOut() {
  $('img.my-image').delay(5000).fadeOut(500, function() {
    $('img.my-image').delay(5000).fadeIn(500);
  });
}
fadeOut();

如何让这个功能永远重复？我可以在fadeOut函数关闭之前放一行代码，使其从头开始吗？

更新 - 这是我的Drupal网站。似乎代码应该工作。 http://smartpeopletalkfast.co.uk/t/

这是我的确切代码：

$(document).ready(function() {
  if ( $(window).width() > 960) {
    function fadeOutFunc() {
      $('.image-list .bottom').delay(1000).fadeOut(500, function() {
        $('.image-list .bottom').delay(1000).fadeIn(500,fadeOutFunc);
      });
    }

    fadeOutFunc();
    // jQuery('.image-list .bottom').css('opacity','0.6');
  }    
});

Answer 1

是的，只需告诉它在fadeIn结束时自行调用。幸运的是，jQuery内置了对此的支持，您已经习惯在淡出后淡入淡出：

function fadeOut() {
    $('img.my-image').delay(5000).fadeOut(500, function() {
        $('img.my-image').delay(5000).fadeIn(500,fadeOut); // <-- see the tiny change?
    });
}

fadeOut();

编辑：我发现你可以使用更多jQuery的语法来简化这一点：

function fadeOut() {
    $('img.my-image').delay(5000).fadeOut(500).delay(5000).fadeIn(500,fadeOut);
}
fadeOut();

Answer 2

如果是我，我会使用setInterval：

setInterval(function fadeOut() {
    $('img.my-image').delay(5000).fadeOut(500, function() {
        $('img.my-image').delay(5000).fadeIn(500);
    });
}, 1000);

这将每1秒加载一次，因为1000毫秒是1秒。它不会停止！

编辑：您可以使用任何秒钟来完成工作。只需将它们用作second_count * 1000，即2 * 1000或2000，持续2秒。

那不是Jan Dovark的问题，你可以尝试使用这段代码：

$(window).focus(function() {

因此当窗口选项卡处于焦点时，setInterval可以正常工作！

永远重复一个功能

2 个答案: