jquery - 永远重复一个函数

Question

这个问题已经有答案了:

How to make a jquery infinite animation? (10 个回答)

已关闭 9 年前。

通过以下内容我调用一个函数。该函数等待，然后淡出图像，等待，然后淡入。

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();