Jquery动画不流畅
问题描述：
现在我有一个动画，div向上滑动放大。我认为动画不够流畅，看起来有点迟缓。这里是一个链接页面：Jquery动画不流畅
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，最大
答
改善响应，考虑使用的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});
答
在我的系统上看起来很好。浏览器和用户计算机系统之间的速度差异显然不同。你可以考虑使用CSS3动画，尽可能使用硬件加速。
似乎罚款给我吗？ – 2011-06-10 08:52:21
它的一个有趣的声明，但这里没有问题。我认为这可能是一个硬件问题，因为它对我来说似乎没问题。 – 2011-06-10 08:52:58