1

Hello pros from Stackoverflow, I have multiple span elements for which I need to add jquery effects in some order of the elements. I have written a primitive way to do that (like here: JSfiddle).

This is 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);
                    });
                });
            });
        });
    });
});

But as you see, this is a difficult to implement for more than 3 elements this way.
I have defined classes .bold, .highlights and .sizes as future properties for elements and I have tried with .animate() in combination with .addClass() but without success.
Since I have to "animate" more than 20 elements with custom properties for each, can you help me with an advanced but easier to implement solution? I'm looking for a solution IE8+ compatible.
Thank you in advance.

4

2 回答 2

2

Iterate through the items, read their classes and edit their appearance/animate them accordingly. For example here is a rework of your current snippet:

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

This function will go through all of your spans, check if they have a size-... class. If an element does have it - it will take the number after that and use it as a size parameter (also removing the need of the css classes).

Note that there is a delay counter, appended to each animation, so that each element will be animated at the right time.

You can do the same with color classes etc. Also you should probably rework the parsing of properties from the class name (10 out of span-10) using regex. The current code may break if there are other classes after the span property.

Update

Here is an example using regex to parse parameter from a class attribute:

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

jsfiddle Demo 2

Hope this helps!

于 2013-09-05T04:46:21.957 回答
1

您可以使用 delay 方法来延迟元素与先前动画所花费的时间量，尽管还有许多其他属性可以为您提供排队动画的方式，但您可以简单地创建一个变量，该变量将增加 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);

   });
于 2013-09-05T05:01:04.037 回答