如何为这个 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 中使用任何动画“缓动”功能。我几个月前发布的这个问题中对此进行了详细讨论...

Looking for jQuery easing functions without using a plugin

上面的线程包含 jQuery 缓动函数 in the accepted answer 以及 a link to more third party easing functions（该页面上的第 2 和第 3 个链接将下载这些函数）。

查看at the demos here，似乎easeInCirc 符合您的描述。

手动将特定的缓动函数添加到您的<script>...

$.easing.easeInCirc = function (x, t, b, c, d) {
    return -c * (Math.sqrt(1 - (t/=d)*t) - 1) + b;
}

然后，您只需将其放在 duration 参数之后，即可从现有的 jQuery animate() 函数中调用它。

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

Here is a JSFiddle with the animate() function slowed for illustration.

Answer 2

你的意思是easing?

另一个想法：为什么不将缓动代码添加到您的 javascript 文件中？ 这是我在JsFiddle 中的看法 如果插件大小困扰您，您可以选择您想要的缓动并切断其他缓动。 希望这会有所帮助。

Answer 3

Jquery 允许缓动，查看easing plugin。

看起来像这样（未经测试）

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

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