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