JQuery-按特定顺序向元素添加效果

来自Stackoverflow的Hello pros，我有多个span元素，需要按元素的顺序添加jquery效果。我已经写了一个简单的方法来实现这一点（比如这里：）。

这是HTML：

<div class="content">
  <span id="zoom-1" class="bold">ZOOMING 1</span>
  <span id="zoom-2" class="highlight-blue">ZOOMING 2</span>
  <span id="zoom-3">ZOOMING 3</span>
</div>
<div class="content">
  <span id="zoom-4" class="highlight-grey">ZOOMING 4</span>
  <span id="zoom-5">ZOOMING 5</span>
  <span id="zoom-6" class="highlight-red bold">ZOOMING 6</span>
</div>

JS:

但正如您所看到的，对于3个以上的元素，这种方式很难实现。
我已经将class.bold、.highlights和.size定义为元素的未来属性，并尝试将.animate（）与.addClass（）结合使用，但没有成功。
由于我必须为每个元素“设置”20多个具有自定义属性的元素，您能否帮助我提供一个高级但更易于实现的解决方案？我正在寻找与IE8+兼容的解决方案。

---

提前谢谢。

反复浏览这些项目，阅读它们的类并相应地编辑它们的外观/设置它们的动画。例如，下面是对当前代码段的重做：

jQuery(document).ready(function(){
    var animCounter = 0;
    $("span").each(function(){
        var spanClasses = $(this).attr('class');
        if (spanClasses.indexOf('size-')!=-1){
            var size =  spanClasses.substring( spanClasses.indexOf('size-')+5 );
            $(this).delay(animCounter * 500).animate({'font-size':size+'px'},500);
            animCounter++;
        }
    });
});

此函数将遍历所有跨度，检查它们是否有

size-…

类。如果一个元素确实有它-它将接受后面的数字，并将其用作大小参数（也消除了css类的需要）

请注意，每个动画都附加了一个延迟计数器，以便在正确的时间为每个元素设置动画

您可以对颜色类等执行相同的操作。您可能还应该使用正则表达式从类名称（

10

）中重新解析属性。如果span属性之后还有其他类，则当前代码可能会中断

更新

以下是使用正则表达式从类属性解析参数的示例：

var size = spanClasses.match(/size-\d*/)[0].substring(5);

---

希望这有帮助

您可以使用“延迟方法”（delay method）将元素延迟到以前的动画所占用的时间量，尽管还有许多其他属性提供了将动画排队的方法，但您只需创建一个变量，该变量将随着添加的每个动画而递增500。如下所示，你可以做同样的尝试

jQuery(document).ready(function()
    {
        var time=0;
        $('#zoom-1').animate({'font-size':'10px'}, 500);time+=500; //or the amount
        $('#zoom-2').delay(time).animate({'font-size':'30px'},500);time+=500; //or the amount
        $('#zoom-3').delay(time).animate({'font-size':'20px'},500);time+=500; //or the amount
        $('#zoom-4').delay(time).animate({'font-size':'20px'},500);time+=500; //or the amount
        $('#zoom-5').delay(time).animate({'font-size':'10px'},500);time+=500; //or the amount
        $('#zoom-6').delay(time).animate({'font-size':'30px'},500);

   });

---

你的方法也很有效@Eshant Sahu，只是有一个小问题，它在动画之前出现了“mini”文本。@Mario欢迎！顺便问一下，我可以问你为什么接受另一个答案吗？我的答案是通用的和一致的-它适用于6个、20个或200个项目，不需要任何额外的代码，并保存一些css声明。Eshant的答案是有序的，但您仍然需要逐行单独编写每个元素。显然，我的建议更易于维护，并且从长远来看会节省时间。你的方法非常好@ile，易于实现，效果非常好，这就是我选择的答案。我感谢你的绝妙想法和有用的帮助。Eshante的方法就像一个“备份”解决方案，如果根据显示分辨率，同一元素的大小不同，我可以使用它。这就是为什么我也给他的解决方案打分。

var size = spanClasses.match(/size-\d*/)[0].substring(5);

jQuery(document).ready(function()
    {
        var time=0;
        $('#zoom-1').animate({'font-size':'10px'}, 500);time+=500; //or the amount
        $('#zoom-2').delay(time).animate({'font-size':'30px'},500);time+=500; //or the amount
        $('#zoom-3').delay(time).animate({'font-size':'20px'},500);time+=500; //or the amount
        $('#zoom-4').delay(time).animate({'font-size':'20px'},500);time+=500; //or the amount
        $('#zoom-5').delay(time).animate({'font-size':'10px'},500);time+=500; //or the amount
        $('#zoom-6').delay(time).animate({'font-size':'30px'},500);

   });