jquery - css3 トランジションの問題

Question

私は現在このサイトを開発しています：

http://remedia-solutions.com/clientes/0066_burrosconalas/demo/

現在デモであり、これは私がトランジションに使用しているものです:

http://visionmedia.github.com/move.js/

css3トランジション用のjsフレームワークです。

uno、dos、tres のような順序で実行すると、完全に機能し、問題はありませんが、(tres、dos) または (tres、uno、dos) のような操作を行うと、アニメーションがうまくいきません。なぜこれが起こっているのか本当にわかりません私はタイムアウト機能を使用しましたが、アニメーションが500ミリ秒の遅延のようにアニメーション化する順序でアニメーション化するとまだ機能しません、私のコードでは奇妙な原因です私はそのオプションを持っていません.

私のjsコードは次のとおりです。

function movimiento(){
    move("#capa3").set('opacity','0').translate(220,0).scale('0').ease('cubic-bezier(0.770, 0.000, 0.175, 1.000)').duration('1.5s').end();
}

$(document).ready(function() {
    var lugar = 1;
    var proviene = 0;


    $("#header span").click(function() {
        var id = this.id;
        if(id == 'uno'){
            if(lugar == 2){


                move("#segunda").set('opacity','0').translate(0,-200).scale(0).ease('cubic-bezier(0.770, 0.000, 0.175, 1.000)').duration('1.5s').end(function(){
                    move("#capa1").delay('0.1s').set('opacity','1').translate(250,250).scale(1).ease('cubic-bezier(0.770, 0.000, 0.175, 1.000)').duration('1.5s').end();
                    move("#capa2").set('opacity','0').translate(220,0).scale('0').ease('cubic-bezier(0.770, 0.000, 0.175, 1.000)').duration('1.5s').end();
                });
                lugar = 1;
            }
            if(lugar == 3){

                move("#cuarta").set('opacity','0').translate(0,-200).scale(0).ease('cubic-bezier(0.770, 0.000, 0.175, 1.000)').duration('1.5s').end(function(){
                    move("#quinta").set('opacity','0').translate(0,-200).scale(0).ease('cubic-bezier(0.770, 0.000, 0.175, 1.000)').duration('1.5s').end(function(){
                    move("#capa3").set('opacity','0').translate(220,0).scale('0').ease('cubic-bezier(0.770, 0.000, 0.175, 1.000)').duration('1.5s').end();
                    move("#capa2").delay('0.8s').set('opacity','0.5').translate(220,0).scale('0').ease('cubic-bezier(0.770, 0.000, 0.175, 1.000)').duration('1.5s').end(function(){
                            $("#capa2").animate({opacity: 0})
                    });
                    move("#capa1").delay('1s').set('opacity','1').translate(250,250).scale(1).ease('cubic-bezier(0.770, 0.000, 0.175, 1.000)').duration('1.5s').end();
                    })
                    })




                lugar = 1;
            }

            console.log(lugar)
        }
        if(id == 'dos'){
            if(lugar == 1){

                move("#capa1").set('opacity','0').translate(500,1200).scale(5).ease('cubic-bezier(0.770, 0.000, 0.175, 1.000)').duration('1.5s').end();
                move("#capa2").delay('0.1s').set('opacity','1').translate(250,250).scale(1).ease('cubic-bezier(0.770, 0.000, 0.175, 1.000)').duration('1.5s').end(function(){
                    move("#segunda").set('opacity','1').translate(430,-200).scale(1).ease('cubic-bezier(0.770, 0.000, 0.175, 1.000)').duration('1.5s').end();
                });
                lugar = 2;
            }
            if(lugar == 3){

                move("#cuarta").set('opacity','0').translate(0,-200).scale(0).ease('cubic-bezier(0.770, 0.000, 0.175, 1.000)').duration('1.5s').end(function(){
                    move("#quinta").set('opacity','0').translate(0,-200).scale(0).ease('cubic-bezier(0.770, 0.000, 0.175, 1.000)').duration('1.5s').end(function(){
                        setTimeout(movimiento,10)
                        move("#capa2").delay('0.3s').set('opacity','1').translate(250,250).scale(1).ease('cubic-bezier(0.770, 0.000, 0.175, 1.000)').duration('1.5s').end(function(){
                            move("#segunda").set('opacity','1').translate(430,-200).scale(1).ease('cubic-bezier(0.770, 0.000, 0.175, 1.000)').duration('1.5s').end();

                        });

                    })
                })

                lugar = 2;
            }

            console.log(lugar)

        }
        if(id == 'tres'){
            if(lugar == 1){

                move("#capa1").set('opacity','0').translate(500,1200).scale(5).ease('cubic-bezier(0.770, 0.000, 0.175, 1.000)').duration('1.5s').end();
                move("#capa2").delay('0.5s').set('opacity','0.5').translate(500,1200).scale(5).ease('cubic-bezier(0.770, 0.000, 0.175, 1.000)').duration('1.5s').end(function(){

                });
                move("#capa3").delay('0.8s').set('opacity','1').translate(250,250).scale(1).ease('cubic-bezier(0.770, 0.000, 0.175, 1.000)').duration('1.5s').end(function(){
                    move("#cuarta").set('opacity','1').translate(430,-200).scale(1).ease('cubic-bezier(0.770, 0.000, 0.175, 1.000)').duration('1.5s').end();
                    move("#quinta").delay('0.1s').set('opacity','1').translate(-430,-200).scale(1).ease('cubic-bezier(0.770, 0.000, 0.175, 1.000)').duration('1.5s').end();
                });
                lugar = 3;
                proviene = 1;
            }
            if(lugar == 2){

                move("#segunda").set('opacity','0').translate(0,-200).scale(0).ease('cubic-bezier(0.770, 0.000, 0.175, 1.000)').duration('1.5s').end(function(){
                    move("#capa2").set('opacity','0').translate(500,1200).scale(5).ease('cubic-bezier(0.770, 0.000, 0.175, 1.000)').duration('1.5s').end();
                    move("#capa3").delay('0.1s').set('opacity','1').translate(250,250).scale(1).ease('cubic-bezier(0.770, 0.000, 0.175, 1.000)').duration('1.5s').end(function(){

                    move("#cuarta").set('opacity','1').translate(430,-200).scale(1).ease('cubic-bezier(0.770, 0.000, 0.175, 1.000)').duration('1.5s').end();
                    move("#quinta").delay('0.1s').set('opacity','1').translate(-430,-200).scale(1).ease('cubic-bezier(0.770, 0.000, 0.175, 1.000)').duration('1.5s').end();

                    });
                });
                lugar = 3;
            }

            console.log(lugar)
        }
    });


});

解決策を探し続けます。どんな助けでも大歓迎です tnx! :)

Answer 1

別のプラグインを使用することにしましたが、問題なく動作しました。

http://ricostacruz.com/jquery.transit/

jquery トランジット プラグインです。念のため、ここにコードを表示します。

$(document).ready(function() {
    var lugar = 1;


    $("#header span").click(function() {
        var id = this.id;

        if(id == 'uno'){
            if(lugar == 2){

                $("#segunda").transition({x:'0px', y: '-200px',scale: 0, opacity: 0},1000, 'cubic-bezier(0.770, 0.000, 0.175, 1.000)',function(){
                    $("#capa2").transition({x: '220px', y: '0px',scale: 0,opacity : 0},1500,'cubic-bezier(0.770, 0.000, 0.175, 1.000)');
                    $("#capa1").delay(200).transition({x: '250px', y: '250px',scale: 1,opacity : 1},1500,'cubic-bezier(0.770, 0.000, 0.175, 1.000)')
                });


                lugar = 1;
            }
            if(lugar == 3){

                $("#cuarta").transition({x: '0px', y: '-200px',scale: 0,opacity : 0},1000,'cubic-bezier(0.770, 0.000, 0.175, 1.000)',function(){

                    $("#quinta").transition({x:'0px', y: '-200px',scale: 0, opacity: 0},1000, 'cubic-bezier(0.770, 0.000, 0.175, 1.000)',function(){
                        $("#capa3").transition({x:'220px', y: '0px',scale: 0, opacity: 0},1500, 'cubic-bezier(0.770, 0.000, 0.175, 1.000)');
                        $("#capa2").delay(200).transition({x:'220px', y: '0px',scale: 0, opacity: '0.5'},1500, 'cubic-bezier(0.770, 0.000, 0.175, 1.000)',function(){
                            $("#capa2").transition({opacity: 0},100);
                        });
                        $("#capa1").delay(500).transition({x: '250px', y: '250px',scale: 1,opacity : 1},1500,'cubic-bezier(0.770, 0.000, 0.175, 1.000)')
                    })

                })


                lugar = 1;
            }

            console.log(lugar)
        }
        if(id == 'dos'){
            if(lugar == 1){

                $("#capa1").transition({x: '500px', y: '1200px',scale: 5,opacity : 0},1500,'cubic-bezier(0.770, 0.000, 0.175, 1.000)');
                $("#capa2").delay(200).transition({x: '250px', y: '250px',scale: 1,opacity : 1},1500,'cubic-bezier(0.770, 0.000, 0.175, 1.000)',function(){
                    $("#segunda").transition({x: '430px',y: '-200px', scale: 1,opacity:1},1000,'cubic-bezier(0.770, 0.000, 0.175, 1.000)')
                });


                lugar = 2;
            }
            if(lugar == 3){

                $("#cuarta").transition({x: '0px', y: '-200px',scale: 0,opacity : 0},1000,'cubic-bezier(0.770, 0.000, 0.175, 1.000)',function(){

                    $("#quinta").transition({x:'0px', y: '-200px',scale: 0, opacity: 0},1000, 'cubic-bezier(0.770, 0.000, 0.175, 1.000)',function(){
                        $("#capa3").transition({x:'220px', y: '0px',scale: 0, opacity: 0},1500, 'cubic-bezier(0.770, 0.000, 0.175, 1.000)');
                        $("#capa2").delay(200).transition({x:'250px', y: '250px',scale: 1, opacity: 1},1500, 'cubic-bezier(0.770, 0.000, 0.175, 1.000)',function(){
                            $("#segunda").transition({x: '430px',y: '-200px', scale: 1,opacity:1},1000,'cubic-bezier(0.770, 0.000, 0.175, 1.000)')
                        })

                    })

                })


                lugar = 2;
            }

            console.log(lugar)

        }
        if(id == 'tres'){
            if(lugar == 1){


                $("#capa1").transition({x: '500px', y: '1200px',scale: 5,opacity : 0},1500,'cubic-bezier(0.770, 0.000, 0.175, 1.000)');
                $("#capa2").delay(200).transition({x: '500px', y: '1200px',scale: 5,opacity : '0.5'},1500,'cubic-bezier(0.770, 0.000, 0.175, 1.000)',function(){
                    $("#capa2").transition({opacity: 0},100);
                });
                $("#capa3").delay(500).transition({x: '250px', y: '250px',scale: 1,opacity : 1},1500,'cubic-bezier(0.770, 0.000, 0.175, 1.000)',function(){
                        $("#cuarta").transition({x: '430px',y: '-200px', scale: 1,opacity:1},1000,'cubic-bezier(0.770, 0.000, 0.175, 1.000)')
                        $("#quinta").delay(200).transition({x: '-430px',y: '-200px', scale: 1,opacity:1},1000,'cubic-bezier(0.770, 0.000, 0.175, 1.000)')
                    });
                lugar = 3;

            }
            if(lugar == 2){


                $("#segunda").transition({x:'0px', y: '-200px',scale: 0, opacity: 0},1000, 'cubic-bezier(0.770, 0.000, 0.175, 1.000)',function(){
                    $("#capa2").transition({x: '500px', y: '1200px',scale: 5,opacity : 0},1500,'cubic-bezier(0.770, 0.000, 0.175, 1.000)');
                    $("#capa3").delay(200).transition({x: '250px', y: '250px',scale: 1,opacity : 1},1500,'cubic-bezier(0.770, 0.000, 0.175, 1.000)',function(){
                        $("#cuarta").transition({x: '430px',y: '-200px', scale: 1,opacity:1},1000,'cubic-bezier(0.770, 0.000, 0.175, 1.000)')
                        $("#quinta").delay(200).transition({x: '-430px',y: '-200px', scale: 1,opacity:1},1000,'cubic-bezier(0.770, 0.000, 0.175, 1.000)')
                    });
                })


                lugar = 3;
            }

            console.log(lugar)
        }


    });


});