Question

我很难理解如何循环jQuery，我认为我的问题是以PHP的方式思考。

让我们说这是一个非常简单的例子。

HTML：

<div style="background:#98bf21;height:100px;width:100px;position:relative">

JS

$(document).ready(function(){
$("div").animate({height:300},"slow");
$("div").animate({width:300},"slow");
$("div").animate({height:100},"slow");
$("div").animate({width:100},"slow");
});

查看here

如果我理解正确，我将不得不使用.each() *

但我无法弄清楚如何让它发挥作用。

注意：这只是一个例子，我对你要采取的方法更感兴趣，而不是实际的循环。

提前致谢，请询问是否需要澄清！

*我不一定要用.each（）寻找答案，你采取的任何方法都可以用于学习目的。

Answer 1

你只需要一个可以作为最后一个动画回调开始的功能，如下所示：

$(function(){
    function loop() {
      $("div").animate({height:300},"slow")
              .animate({width:300 },"slow")
              .animate({height:100},"slow")
              .animate({width:100 },"slow", loop);
    }
    loop();
});

You can test it out here

Answer 2

窃取Nick的代码，以便我们可以在经过多次迭代后将其扩展为终止。

$(function(){
  function loop(n) {
    if(n > 0)
    {
      $("div").animate({height:300},"slow")
          .animate({width:300 },"slow")
          .animate({height:100},"slow")
          .animate({width:100},"slow")
          .animate({width:100 },"slow", loop(n-1));
    }
  }
  loop(5);
});

第二个.animate({width:100},"slow"不是拼写错误。我不明白为什么，但没有它就不会出现缩小宽度的动画。

Answer 3

jQuery（几乎总是）自动应用你在选择器返回的每个元素上运行的方法。

在您的示例中，页面上的每个div都会被设置为动画。

此外，jQuery是可链接的，这意味着您可以删除大量重复的代码：

$(document).ready(function(){
$("div")
  .animate({height:300},"slow")
  .animate({width:300},"slow")
  .animate({height:100},"slow")
  .animate({width:100},"slow");
});

还要知道，您可以使用.animate（）方法一次为多个属性设置动画。根据您所需的效果，您可以组合动画属性。

基本理解jQuery中的循环

3 个答案: