Jquery Animations not fluid
right now I have an animation where a div enlarges with an upward slide. I do not think the animation is fluid enough and it seems a little bit laggy. Here is a link for the page:
开发者_JS百科http://privat.bahnhof.se/wb867900/
Here is the code:
$(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, Max
It seems fine on my system. Speed differences will obviously vary between browsers and user's computer system. You could consider using CSS3 animations, which use hardware-accelation wherever possible.
- Animation with CSS Transitions Made Easy
- Flux Slider
To improve the response, consider the use of the queue: false
inside the .animate()
method
so the current animation doesn't have to wait the others
$(overlay).stop().animate({
'padding-top' : 0,
'padding-right' : 0,
'padding-bottom' : 0,
'padding-left' : 0,
'bottom' : 0,
'opacity' : 0.7
}, {"normal", queue: false});
精彩评论