jquery - for 循环中的函数

Question

我有一些代码试图在滑块效果中迭代一些图像。但是，当我尝试从我的 for 循环中调用该函数时，它不起作用。但是，如果我animateImage在循环之外调用函数，它可以正常工作，但只运行一次。我怎样才能让它成功运行淡入，淡出 - 再次循环 - 淡入淡出？

$(document).ready(function(){
  function animateImage() {
    $('#mainImage').fadeOut( 5000, function() {
      $(this).fadeIn(5000);
    });

    for (var i = 0, limit = 7; i < limit; i++) {
      animateImage();
    }
  }

Answer 1

您需要等待动画完成才能告诉 jQuery 再次进行动画处理，因此您需要使用一些异步模式，例如：

$(document).ready(function(){
  function animateImage(cb) {
      $('#mainImage').fadeOut( 5000, function() {
          $(this).fadeIn(5000, cb);
      });
  }

  var i = 0, limit = 7;
  function maybeAnimateImage() {
    if (++i < limit)
      animateImage(maybeAnimateImage);
  }
  maybeAnimateImage();
})

Answer 2

问题是动画在前一个完成之前被调用。

这将做你想要的：http: //jsfiddle.net/q9ssn/2

注意：出于测试目的，我将时间设置为 1 秒，以便您更快地看到它。

function animateImage(times) {
    times = (times | 1);
    var i = 1;
    var fadeInAndOut = function() {
        $('#mainImage').fadeOut(1000, function () {
            $(this).fadeIn(1000, function () {
                if (i++ < times) {
                    fadeInAndOut();
                }
            });
        });
    };
    fadeInAndOut();
}
animateImage(7);

Answer 3

可能是您遇到大括号和方括号的语法错误...

正确的代码是

$(document).ready(function(){
    function animateImage() {
        $('#mainImage').fadeOut( 5000, function() {
            $(this).fadeIn(5000);
        });
    }
    for (var i = 0, limit = 7; i < limit; i++) {
        animateImage();
    }
});

祝你好运