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

问题是animate在前一个完成之前被调用了。

这将做你想做的事：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();
    }
});

祝你好运

for循环中的函数

3 个答案: