jQuery的動畫滯後/口吃

我正在爲我的網站一個新的介紹頁面上，並碰到了一個問題......jQuery的動畫滯後/口吃

標誌旋轉，在0度停止，然後應該擴展到20％，並且移動右上方。

的旋轉停止後，它有一個像1.2秒的暫停之前迅速調整的項目，並繼續...

有人可以看一看，看看這是怎麼回事？

代碼（Fiddle）

rotate = function(element,initial){ 
    element = $(element); 
    rDeg = initial; //Initial angle 
    element.css({ 
    '-webkit-transform': 'rotate('+rDeg+'deg)', 
     '-moz-transform': 'rotate('+rDeg+'deg)', 
     '-ms-transform': 'rotate('+rDeg+'deg)', 
     '-o-transform': 'rotate('+rDeg+'deg)', 
      'transform': 'rotate('+rDeg+'deg)'  
    }); 
    // Animate rotation with a recursive call 
     timer = setTimeout(function() { 
     ++rDeg; rotate('#logo',rDeg); 
     },5); 
     if(rDeg==-1){ clearTimeout(timer); moveLogo() } 
} 
rotate('#logo',-80); 

moveLogo = function(){ $('#logo').animate({width:'20%'}, 1800) }

來源

2013-07-04 Casey Dwayne

問題是propably通過動畫從100％變化寬度至20％（和直到寬度小於200像素它不具有效應）引起的。試試這個：

Demo

moveLogo = function(){ 
    var requiredWidth = $(window).width()/5; 
    $("#logo").animate({width:requiredWidth + 'px'}, 1800); 
}

來源

2013-07-04 17:16:15 mishik

嗯..但我不希望它延遲..我希望它補間動畫1.8秒，使其平穩。 –

我將不得不做類似的事情（循環，逐漸改變價值）來使動畫變得流暢嗎？我認爲這就是'duration'的價值所在。它以前一直很有用。 *好吧，永遠在Chrome中，並不總是在FF * –

平滑我看...請參閱更新的演示 – mishik

我建議使用jQuery插件像this這將解決您在同一時間創建一個簡單的$('#logo').rotate(90);遞歸函數，你應該添加調整大小功能$('#logo').animate({width:'20%'}這樣既會在同一時間做一個很好的調整大小和位置。希望這可以幫到你。

來源

2013-07-04 17:38:15 RicardoGonzales

jQuery的動畫滯後/口吃

回答

相關問題