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，Max

Answer 1

我的系统似乎很好。浏览器和用户的计算机系统之间的速度差异显然会有所不同。您可以考虑使用CSS3动画，尽可能使用硬件加入。

Answer 2

要改进响应，请考虑在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});

Jquery动画不流畅

2 个答案: