jquery - 如何为这个 jQuery 动画添加加速？

Question

我能够为我的 <div> 制作动画( more info ) 来自 bottom:-100px至bottom:0px .

现在我想要不同的速度:在动画开始时放慢一点，然后在动画结束时变快。

它看起来是这样的:

$('#bannerFijo').animate({ bottom: '-15px' }, 1000, function() {
                    $('#bannerFijo').animate({ bottom: '0px' }, 100);
}); 

但我确信一定有另一种方法可以让速度逐渐改变。

-编辑-

动画版本二:

$('#bannerFijo').animate({ bottom: '0px' }, 1200, function() {
                    $('#bannerFijo').animate({ bottom: '-15px' }, 300,function() {
                        $('#bannerFijo').animate({ bottom: '-5px' }, 150,function() {
                            $('#bannerFijo').animate({ bottom: '-10px' }, 100,function() {
                                $('#bannerFijo').animate({ bottom: '0px' }, 50);
                                    return true;
                                });
                            });
                    });
        });

-编辑-感谢 SuperPaperSam 我找到了这个解决方案(“无”插件)

$.easing.easeOutBounce = function (x, t, b, c, d) {
            if ((t/=d) < (1/2.75)) {
                return c*(7.5625*t*t) + b;
            } else if (t < (2/2.75)) {
                return c*(7.5625*(t-=(1.5/2.75))*t + .75) + b;
            } else if (t < (2.5/2.75)) {
                return c*(7.5625*(t-=(2.25/2.75))*t + .9375) + b;
            } else {
                return c*(7.5625*(t-=(2.625/2.75))*t + .984375) + b;
            }

    }

所以动画函数看起来像这样:

function mostrar_banner(){

        $('#bannerFijo').animate({ bottom: '+=110px' }, 2000, 'easeOutBounce'); 
}

Answer 1

Jquery 允许缓动，请查看 easing plugin .

看起来像这样(未经测试)

$('#bannerFijo').animate({ bottom: '-15px' }, 1000, nameofeasing, function() {
                $('#bannerFijo').animate({ bottom: '0px' }, 100, nameofeasing);
}); 

编辑:我创建了一个测试页面，不使用缓动插件 http://jsfiddle.net/EbJBn/2/