开发者

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});
0

上一篇:

下一篇:

精彩评论

暂无评论...
验证码 换一张
取 消

最新问答

问答排行榜