Question

我一直试图为一个页面创建一个推荐部分，该部分将有幻灯片fadeIn（），fadeOut（）效果。我有它使用插件，但我真的想了解它的工作原理，以便将来进行定制。

我看到它在某种程度上添加/删除类是如何工作的，但它是否可以使用循环？关于javascript如何在循环迭代之间暂停，我遇到了很多麻烦。以下面的代码为例：

    <div class="container"></div>

   var jedi = new Array();
  jedi[0]= 'Anakin';
  jedi[1]= 'ObiWan';
  jedi[2]= 'Jacen Solo';

  $.each(jedi,function(counter,value){

    $('.container').append('<p class="blue">' + jedi[counter] + '</p>').children().fadeIn(800*counter);
    $('.container').children().fadeOut(800);
    //alert(value);

     })

也是jsfiddle：http://jsfiddle.net/jpmMR/

我想淡化一个人物名字，然后淡出，然后是下一个人等等。但是发生的事情是一团糟。如果这是可能的，有人可以告诉我它是如何可能的吗？此外，如果它不是太麻烦，他们可以向我解释'如何'和'为什么'解决JS在几毫秒内完成一个循环的事实。如果不是更麻烦的话，用英语解释它就像我9岁那样。

还可以循环$ .each吗？非常感谢提前。这一直在杀我。

Answer 1

与接受的答案here类似，您将不得不使用回调。 each()函数对每个元素都会毫不延迟地运行，因此会导致它们以异步方式运行。

Answer 2

如果你想链接动画，那么你必须在第一个完成功能上启动第二个动画，依此类推。因为它是你一次运行所有的动画。您可以在relevant jQuery documentation中看到动画完成功能的工作原理。

或者，您可以在jQuery中设置动画队列，以便每个队列都在另一个之后运行。

Answer 3

你也可以这样做......虽然如果你想做其他链式动画，它就不那么灵活了。

http://jsfiddle.net/jpmMR/1/

jquery中$ .each和循环背后的逻辑

3 个答案: