如何向该jQuery动画添加加速度? [英] How can I add aceleration to this jQuery animation?

问题描述

我能够为<div>制作动画(更多信息)从bottom:-100px到bottom:0px.

I was able to animate my <div> ( more info ) from bottom:-100px to bottom:0px.

现在，我想使用不同的速度:在动画开始时开始慢一点，然后在动画结束时开始快一点.

Now I'd like to have different speeds: Start a bit slower at the beginning of the animation and then get faster by the end of the animation.

这是它的外观:

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

但是我敢肯定，必须有另一种方法来使速度逐渐变化.

But I'm sure there must be another way so that the speed changes progressively.

-编辑-

动画第二版:

$('#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，我才有了这个解决方案('no'插件)

-Edit- Thanks to SuperPaperSam i got to this solution ('no' plugins)

$.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;
            }

    }

所以动画功能看起来像这样:

So the animate function look like this:

function mostrar_banner(){

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

推荐答案

jQuery允许宽松，请查看

Jquery allows for easing, check out the easing plugin.

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

It would look like this (un tested)

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

我创建了一个不使用宽松插件的测试页面 http://jsfiddle.net/EbJBn /2/

I Created a test page of this not using the easing plugin http://jsfiddle.net/EbJBn/2/

这篇关于如何向该jQuery动画添加加速度?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！