與CSS3過渡問題

Question

即時通訊目前正在開發的這個網站：

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

目前是一個演示，這使用的過渡是林：

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

這是JS框架css3過渡。 （tres，dos）或（tres，uno，dos）之類的東西，動畫全部都是這樣，但是如果你像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) 
     } 


    }); 


});