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


    });


});