Jquery動畫不流暢

Question

現在我有一個動畫，div向上滑動放大。我認爲動畫不夠流暢，看起來有點遲緩。這裏是一個鏈接頁面：

http://privat.bahnhof.se/wb867900/

這裏是代碼：

$(document).ready(function() { 
    function divSlideUp(divName, overlayName, wrapperName, textName){ 
      var wrapper = wrapperName; // Hover for Whole image 
      var image = divName; 
      var overlay = overlayName; 
      var addedText = textName; 

      $(addedText).hide(); 
      $(wrapper).hoverIntent(
      function() { 
       $(image).stop().fadeTo("normal", 1); 
       $(overlay).stop().animate({ 
       'padding-top' : 0, 
       'padding-right' : 0, 
       'padding-bottom' : 100, 
       'padding-left' : 0, 
       'bottom' : 100, 
       'opacity' : 1 
       }, "fast", "linear",function(){ 
       $(addedText).stop().fadeIn('fast'); 
       }); 
      }, 
      function() { 
      $(addedText).hide(); 
      $(image).stop().fadeTo("normal", 0.7, function(){ 
      $(overlay).stop().fadeTo("normal", 0.7); 
      }); 

      $(overlay).stop().animate({ 
       'padding-top' : 0, 
       'padding-right' : 0, 
       'padding-bottom' : 0, 
       'padding-left' : 0, 
       'bottom' : 0, 
       'opacity' : 0.7 
       }, "normal"); 
      }); 
    } 

    divSlideUp('#image-artist', '#overlay-artist', '#wrapper-artist', '#overlay-artist p'); 
    divSlideUp('#image-poster', '#overlay-poster', '#wrapper-poster', '#overlay-poster p'); 
    divSlideUp('#image-portLogo', '#overlay-portLogo', '#wrapper-portLogo', '#overlay-portLogo p'); 
    divSlideUp('#image-flower', '#overlay-flower', '#wrapper-flower', '#overlay-flower p'); 
    }); // end ready() 

THX，最大

Answer 1

改善響應，考慮使用的queue: false裏面的.animate()方法 所以當前動畫不必等待其他人

$(overlay).stop().animate({ 
     'padding-top' : 0, 
     'padding-right' : 0, 
     'padding-bottom' : 0, 
     'padding-left' : 0, 
     'bottom' : 0, 
     'opacity' : 0.7 
     }, {"normal", queue: false}); 

Answer 2

在我的系統上看起來很好。瀏覽器和用戶計算機系統之間的速度差異顯然不同。你可以考慮使用CSS3動畫，儘可能使用硬件加速。

• Animation with CSS Transitions Made Easy
• Flux Slider