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)动画就会一直出错我真的不知道为什么会这样，我使用了超时功能，但仍然不能工作，当你以动画的顺序动画它有一个像500ms的延迟，然后它动画，是奇怪的原因在我的代码中，我没有那个选项。

下面是我的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)
        }
    });


});

我将继续寻找解决方案，任何帮助都将不胜感激！:)

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)
        }


    });


});