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");

これにより、すべての要素が一度に影響を受けます。変更を 1 つずつ行うためのキューを作成するにはどうすればよいですか。一度に 1 つの拡大要素を持つ。

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/のデモ

より正確な制御とキューイングの自由度については、同様の質問に対する私の回答を参照してください:
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_sequentialjQuery 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 に答える