Question

我对JQuery很陌生，但这是一个非常简单的问题。

我试图通过JavaScript中的字符串数组淡入/淡出/增加/重复，但for循环总是正好4

$(document).ready(function() {
    var words=["Fantastic","Exiting", "Professional", "Life Changing", "Exactly What You Are Looking For..."];
    for(var j = 0; j < words.length; j++){
        $('#word').html(words[j]).fadeOut().delay(1000).fadeIn().delay(1000);
    }
});

我确定这只是一个愚蠢的错误，因为我的代码是盲目的，但是我现在可以自己为我调用它？

提前干杯。

Answer 1

这里的问题是（可能）在 async 中执行了fadeOut和fadeIn，所以实际发生的事情是这样的：

您的循环已启动，j == 0。
jQuery获取#word元素，并将其内容设置为word[0]
jQuery在元素上排队四个动画：fadeOut，delay，fadeIn和delay。
fadeOut开始运行
循环继续，因为动画运行async - j == 1
同样的事情发生在这里--jQuery找到#word元素并将其内容设置为word[1]，并再次对相同的四个动画进行排队。
fadeOut仍未完成。如果是，delay(1000)肯定不是。
接下来的三个循环运行如上所述，最后在第一个word[4]完成之前将内容设置为fadeOut。
每次元素淡入时，动画事件都依次运行，显示内容为word[4]。

您需要使用回调函数来推迟更新元素的内容，直到动画事件结束。

Answer 2

如果我理解正确，你总会看到最后的字符串淡入/淡出。

这是因为循环不会延迟下一次迭代和淡入淡出效果。

您需要更改逻辑，以便在淡入淡出效果之后值不会增加，或者远离使用显式循环。

$(document).ready(function() {
    var words=["Fantastic","Exiting", "Professional", "Life Changing", "Exactly What You Are Looking For..."];
    //run against first string in array
    $('#word').html(words[0]).fadeOut(complete).delay(1000).fadeIn().delay(1000);

    //callback function
    function complete() {
        //check which word we're currently on
        var index = words.indexOf($(this).html());

        //if it's not the last word, run the code with the next
        if (index < words.length) {
            $(this).html(words[index+1]).fadeOut(complete).delay(1000).fadeIn().delay(1000);
        }
     }
});

http://jsfiddle.net/S9MQ9/1/

Answer 3

这可能会解决您的问题，试一试并告诉我们它是否有效。

$(document).ready(function() {
  var words=["Fantastic","Exiting", "Professional", "Life Changing", "Exactly What You Are Looking For..."];
  for(var j = 0; j < words.length; j++){
    (function (index) {
      $('#word').html(words[index]).fadeOut().delay(1000).fadeIn().delay(1000);
    }(j));
  }
});

（JQuery）For Loop not Incrementing

3 个答案: