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

Question

我有多个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;}

联署材料：

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

迭代这些项，读取它们的类并相应地编辑它们的外观/动画。例如，下面是当前片段的重做：

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类的需要)。

请注意，有一个延迟计数器，附加到每个动画，以便每个元素将在正确的时间动画。

您也可以对颜色类等进行同样的操作。还应该使用regex重新解析类名(10 out span-10)中的属性。如果在span属性之后还有其他类，则当前代码可能会中断。

更新

下面是一个使用regex解析类属性中的参数的示例：

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

小提琴演示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);

   });