Question

我是一个JQuery noob试图编写一个简单的jQuery代码，让文本闪烁三次。我的初始代码如下：

$("#welcome").click(function () {
            var i = 1;
            while (++i < 10) {
                    $("#welcome").fadeOut("slow", function () { $("#welcome").fadeIn("slow"); })();
            }
        });

但是由于我可能干涉了我无法理解的力量，上面的代码使文本只闪烁一次。我阅读了关闭并确信下面的代码可以做出改变。不幸的是，它没有。

$("#welcome").click(function () {
        var i = 1;
        while (++i < 10) {
            (function (i) {
                $("#welcome").fadeOut("slow", function () { $("#welcome").fadeIn("slow"); })();
            })(i);
        }
    });

谁能告诉我这里发生了什么？

Answer 1

您需要使用动画队列

var $welcome = $("#welcome").click(function () {
    var i = 1;
    //clear previous animations
    $welcome.stop(true, true);
    while (++i < 10) {
        $welcome.fadeOut("slow").fadeIn("slow");
    }
});

演示：Fiddle

Answer 2

淡入和淡出需要一些时间，你必须等待动画结束才能运行下一个动画。

提供的答案可以解决您的问题，因为jQuery足够聪明，可以缓冲您的动画队列，但它可能会给初学者带来更多的困惑，而且如果您想在淡入淡出的动画之间做其他事情，您也不能依赖它了。

然后你必须在所谓的异步递归方式（woah）上编写代码。只是尝试理解该片段可能会对javascript通用编程有所帮助。

function blink(nbBlinks) {
  // Only blink if the nbBlinks counter is not zero
  if(nbBlinks > 0) {
    $('#welcome').fadeOut('slow', function() {
      // Do stuff after the fade out animation
      $(this).fadeIn('slow', function() {
        // Now we're done with that iteration, blink again
        blink(nbBlinks-1);
      })
    });
  }
}

// Launch our blinking function 10 times
blink(10);

Answer 3

这完美无缺。演示http://jsfiddle.net/X5Qy3/

$("#welcome").click(function () {
      for (var x = 0; x < 3; x += 1) {
        $("#welcome").fadeOut("slow");
        $("#welcome").fadeIn("slow");
      }
});

另外，如果你知道你想做多少次。您应该使用For Loop。 While Loops适用于您不知道自己希望运行多少次的情况。

Answer 4

设置队列

   $("#welcome").click(function () {
        var i = 1;
   //clear animations whcih are running at that time
    $(this).stop(true, true);
        while (++i < 10) {
            $(this).fadeOut("slow").fadeIn("slow");
        }
    });

Answer 5

你不能在循环/迭代中使用jQuery延迟函数，因此你必须使用用户闭包：

$(document).ready(function(){
$(".click1").click(function () {
    for (i=0;i<=10;i++) {
        setTimeout(function(x) { 
            return function() { 
                $("#wrapper").fadeOut("slow", function () { $("#wrapper").fadeIn("slow"); })();
            }; 
        }(i), 1000*i);
    }
});
});

<div id="wrapper"></div><div class="click1">click</div>

您可以稍后更改计数要忽略<div>的次数。

JQuery没有在For循环中执行

5 个答案: