2017-03-19 21 views
0

一連のSVGオブジェクトをアニメーション化しようとしています。基本的な目標は次のとおりです。最初の4つのオブジェクトがアニメートされ、次にアウトされ、オブジェクトの次のセットがアニメーション化されます。最初の2つのキューはうまくいきますが、2番目のセットを取得する最良の方法はわかりません最初のセットが終了するまで待つ。Velocity.js:最初のセットが終了した後の2番目のオブジェクトのアニメーション

JS:

$(document).ready(function() { 
     $('.dt0,.dt1,.dt2,.dt3').velocity("transition.perspectiveRightIn", {stagger: 200, drag: true }); 
     $('.dt0,.dt1,.dt2,.dt3').velocity("transition.perspectiveRightOut", {stagger: 200, drag: true }); 
     $('.tr0,.tr1,.tr2,.tr3').velocity("transition.perspectiveRightIn", {stagger: 200, drag: true }); 
     }) 

UPDATE:ここに私の解決策だが、私は遅延なく、キューイング方式を利用して気にしています

は、ここに私のコードです。

$(document).ready(function() { 
     $('.dt0,.dt1,.dt2,.dt3').velocity("transition.expandIn", {stagger: 200, drag: true }); 
     $('.dt0,.dt1,.dt2,.dt3').velocity("transition.expandOut", {stagger: 200, drag: true, delay: 1000 }); 
     $('.tr0,.tr1,.tr2,.tr3').velocity({opacity: 0}, {duration:0 }); 
     $('.tr0,.tr1,.tr2,.tr3').velocity("transition.expandIn", {stagger: 200, drag: true, delay: 3000 }); 
     }) 

答えて

0

.velocity()それは1が使用できる唯一の構文ではありませんが、.animate()の構文と互換性があります。これは、アニメーションの終わり時にコードを実行するために、最後のパラメータとして、コールバックを使用できることを意味します:

$(selector).velocity(
    { 
    /* animatable properties*/ 
    }, { 
    /* arguments */ 
    }, function(){ 
    // code to be executed upon end of animation. 
    // i.e.: another $(selector).velocity() 
}) 

は(比較的人気のある)私が提案したものとは異なる構文を使用するには、のargumentsセクションを読んで自分のドキュメンテーション。コールバックをcomplete引数として定義することをお勧めします。


(彼らのウェブサイト上で現在特色例に基づいて)アニメーションをチェーン化の推奨される方法は、同じセレクタを.velocity()に後続の呼び出しを連結することです。したがって、基本的にコードは次のように変更されます:

$('.dt0,.dt1,.dt2,.dt3') 
    .velocity("transition.perspectiveRightIn", {stagger: 200, drag: true }) 
    .velocity("transition.perspectiveRightOut", {stagger: 200, drag: true }) 
    .velocity("transition.perspectiveRightIn", {stagger: 200, drag: true }); 
0

コールバックを使用しますか?

$('.dt0').velocity({ 
    opacity: 0 //or animation name 
}, { 
complete: function(elements) { 
    $('.dt1').velocity({ 
    opacity: 0 //or animation name 
    }, { 
    complete: function(elements) { 
    //... the others 
    },{duration:200, delay:2000 } //2s delay 
    }); 
},{duration:1000 } 
}); 
関連する問題