How can I add aceleration to this jQuery animation?

Question

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.

This is how it looks:

$('#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.

-edit-

Animated version two:

$('#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;
                                });
                            });
                    });
        });

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

Answer 1

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

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

Answer 2

You can use any animation "easing" function within jQuery without a plugin. It's discussed in detail in this question I posted a few months ago...

Looking for jQuery easing functions without using a plugin

The thread above contains the jQuery easing functions in the accepted answer as well as a link to more third party easing functions (the 2nd and 3rd links on that page will download the functions).

Looking at the demos here, it seems like easeInCirc fits your description.

Manually add the specific easing function(s) to your <script>...

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

Then you would simply call it from your existing jQuery animate() functions by placing it just after the duration parameter.

$('#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 3

you mean easing?

Another Idea: why not bring the easing code to your javascript file? Here's my take on it in JsFiddle You may select your desired easing and cut off others, if plugin size is bothering you. Hope this helps.