4

我想增加/减少和元素的字体，然后是该类的下一个元素，依此类推，对于一组元素为<div class="test"></div> <div class="test"></div> ..... 我是说

step 1: enlarging the first element and returning to normal size
step 2: enlarging the second element and returning to normal size
....

我的基本代码是

$(document).ready(function() {
    $('.test').animate({
               left:50,
               fontSize: "2em"},
               "slow")
               .animate({
               left:-50,
               fontSize: "1em"},
               "slow");

这将同时影响所有元素。我怎样才能排队来一一进行更改。一次有一个放大的元素。

4

5 回答 5

3

你可以用

$('.test').each(function(idx){
    var duration = 1200; // duration for all animations (2 x slow)
    $(this)
         .delay(duration*idx)
         .animate({ left:50, fontSize: "2em" }, 'slow')
         .animate({ left:-50, fontSize: "1em" }, 'slow');
});

演示在http://jsfiddle.net/gaby/rz5Es/

要获得更精确的控制和更多的排队自由，请查看我对类似问题的回答：
A non-nested animation sequence in jQuery?

于 2012-04-23T17:14:03.633 回答
2

您需要使用回调和要按顺序制作动画的元素数组...

function animateSequence(elements){
    var element = $(elements).first();
    var originalSize = $(element).css('font-size');

    elements = $(elements).not($(element));

    $(element).animate(
        { fontSize: "2em" },
        "slow",
        function(){
            $(this).animate(
                { fontSize: originalSize },
                "slow",
                function(){
                    if(elements.length > 0)
                        animateSequence(elements);
                }
            )
        }
    );
}

animateSequence($('.test'));

如果你想玩它：http: //jsfiddle.net/xS7X7/

于 2012-04-23T17:10:58.253 回答
1

据我了解，您正在尝试做这样的事情，

$(document).ready(function() {
    (function mycallback(i) {
      var elems = $('.test');
      elems.eq(i).animate({
                   left:50,
                   fontSize: "2em"}, function () {
        mycallback(i + 1 < elems.length ? i + 1 : 0);
      });
    }(0));
});

​演示

更新：

这是一个示例代码，如果您想反转效果，可以这样更改，

$(document).ready(function() {
    (function mycallback(i) {
      var elems = $('.test');
      elems.eq(i).animate({
                   left:50,
                   fontSize: "2em"}, function () {
        $(this).animate({
               left:-50,
               fontSize: "1em"},
               "slow");
        if (i + 1 < elems.length)
            mycallback(i+1);
      });
    }(0));
});

更新的演示

于 2012-04-23T17:09:35.093 回答
1

您将需要遍历所有元素并按animate顺序执行每个元素，这是递归执行此操作的示例代码

function animate_sequential(elems, css, delay, index){
    if(index===undefined) index = 0;
    if(index >= elems.length) return;     
    $(elems[index]).animate(css, delay, function(){
        animate_sequential(elems, css, delay, index+1)
    })
}

animate_sequential($('div'), {'font-size':'30px'}, 500)
animate_sequential($('div'), {'font-size':'15px'}, 500)

在行动中查看它http://jsfiddle.net/anuraguniyal/QJc9L/

它可以很容易地转换为 jQuery 插件，这样您就可以做$('div').animate_sequential和保持与 jQuery animate 相同的界面，您还可以进一步增强它，以便通过传递原始 css 或从元素中获取它来恢复原始 css。

于 2012-04-23T17:10:21.003 回答
0

使用Frame.js更加简单、易读和可扩展：

$('.test').each(function(i){
    var element = $(this);
    var originalSize = element.css('font-size');

    Frame(function(next){
        element.animate({ fontSize: "2em" }, "slow", next);
    });
    Frame(function(next){
        element.animate({ fontSize: originalSize }, "slow", next);
    });
});
Frame(function(next){
    // add a callback after all the animations have finished
    next();
});
Frame.start();
于 2012-04-23T17:31:04.340 回答