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

Question

来自 Stackoverflow 的专业人士您好，我有多个 span 元素，我需要按元素的某种顺序为其添加 jquery 效果。我已经写了一个原始的方法来做到这一点（比如这里：JSfiddle）。

这是 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>

CSS：

.content {
  position:relative;
  color:#000;
  line-height:50px;}
#zoom-1, #zoom-2, #zoom-3, #zoom-4, #zoom-5, #zoom-6 {
  position:relative;
  margin:0 auto;
  font-size:0;
  line-height:0;
}
.bold {font-weight:bold;}
.highlight-red {color:red;}
.highlight-blue {color:blue;}
.highlight-grey {color:grey}
.size-10 {font-size:10px;}
.size-20 {font-size:20px;}
.size-30 {font-size:30px;}

JS：

jQuery(document).ready(function(){
    $('#zoom-1').animate({
        'font-size':'10px'
    }, 500,function(){
        $('#zoom-2').animate({
            'font-size':'30px'
        },500,function(){
            $('#zoom-3').animate({
                'font-size':'20px'
            },500,function(){
                $('#zoom-4').animate({
                    'font-size':'20px'
                },500,function(){
                    $('#zoom-5').animate({
                        'font-size':'10px'
                    },500,function(){
                        $('#zoom-6').animate({
                            'font-size':'30px'
                        },500);
                    });
                });
            });
        });
    });
});

但是如您所见，对于超过 3 个元素，这种方式很难实现。
我已将 .bold、.highlights 和 .sizes 类定义为元素的未来属性，并且我尝试将 .animate() 与 .addClass() 结合使用，但没有成功。
由于我必须为 20 多个具有自定义属性的元素“制作动画”，您能否帮助我提供一个高级但更易于实施的解决方案？我正在寻找兼容 IE8+ 的解决方案。
提前谢谢你。

Answer 1

遍历项目，阅读它们的类并相应地编辑它们的外观/动画它们。例如，这是您当前 sn-p 的返工：

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++;
        }
    });
});

jsfiddle Demo

这个函数会遍历你所有的 span，检查它们是否有 size-... 类。如果一个元素确实有它 - 它将获取之后的数字并将其用作大小参数（也消除了对 css 类的需要）。

请注意，每个动画都有一个延迟计数器，以便每个元素在正确的时间进行动画处理。

您可以对颜色类等执行相同的操作。此外，您可能应该使用正则表达式从类名（span-10 中的10）重新解析属性。如果 span 属性后面还有其他类，当前代码可能会中断。

更新

这是一个使用正则表达式从类属性中解析参数的示例：

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

jsfiddle Demo 2

希望这会有所帮助！

Answer 2

您可以使用延迟方法来延迟元素的时间量，该时间量由以前的动画所占用，尽管还有许多其他属性可以为您提供对动画进行排队的方式，但您只需创建一个将递增的变量您添加的每个动画都会增加 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);

   });