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

SuperPaperSam · Accepted Answer · 2011-08-19T14:21:00.690

2

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/

edited Aug 19 '11 at 14:21

answered Aug 19 '11 at 12:42

SuperPaperSam

303
3
10

can't add any plugin :( only native Jquery functions.. (it's not my call) – Toni Michel Caubet Aug 19 '11 at 12:44
I can see your edit, would it work without plugins? what nameofeasing you suggest? thanks! – Toni Michel Caubet Aug 19 '11 at 12:46
easeInOutQuad is my favorite, you could define it like this http://api.jquery.com/animate/#easing in your document – SuperPaperSam Aug 19 '11 at 12:50
$('#bannerFijo').animate({ bottom: '-15px' }, 1200,specialEasing: { height: 'easeInOutQuad' }, function() { /**/ }); Shall this work???? – Toni Michel Caubet Aug 19 '11 at 12:55
Do not apollogize, you have been very helpfull!!!! i will edit so you can see my current animate (it's kind of funny) – Toni Michel Caubet Aug 19 '11 at 13:21

score 2 · Answer 2 · edited May 23 '17 at 09:59

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.

suhair · Answer 3 · 2011-08-19T16:11:09.163

1

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.

edited Aug 19 '11 at 16:11

answered Aug 19 '11 at 12:43

suhair

10,895
11
52
63

thanks for your suggestion but i need only native Jquery functions; can't add any plugin :( – Toni Michel Caubet Aug 19 '11 at 12:57
oh then you can use either swing or linear easing that comes pre built with the jquery. – suhair Aug 19 '11 at 15:53

How can I add aceleration to this jQuery animation?

3 Answers3

Linked