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/