CODEWITHSUNDEEP
jqueryjquery-animate
Abe Miessler
Abe Miessler

Reputation: 85036

How to implement a jQuery slide/bounce animation?

Basically I would like to have a DIV slide out and do a slight bounce where it goes past it's final size and then returns. Not sure how to explain it so please see my attempt at a diagram below:

--------------------->  //Slides out
                 <----  //Then "bounces" back to it's final size

I have the first part down using the toggle animation:

$("#second").animate({ width: 'toggle' }, 85);

I thought I could get the bounce effect by doing:

$("#second").animate({ width: 'toggle' }, 85).animate({ width: 'toggle' }, 75);

But it disappears. After reading over the animate/toggle documentation I guess this makes sense, but I'm still not sure how to get the desired functionality. Any suggestions?

Bonus points if you can make it so the content of the sliding div is cut off rather than being pushed to the next line.

Upvotes: 0

Views: 11004

Answers (3)

Chris May
Chris May

Reputation: 822

The easiest way I know to do it is include the jQuery Easinh Plugin (http://gsgd.co.uk/sandbox/jquery/easing/jquery.easing.1.3.js) and use the "easeOutBack" method.

$("#second").animate({ width: 'toggle' }, 85, "easeOutBack");

Upvotes: 2

Abe Miessler
Abe Miessler

Reputation: 85036

I was able to implement it this way:

$("#second").animate({ width: 'toggle' }, 250).animate({ width: '-=10' },185);

Seemed like the most straight forward way.

Upvotes: 2

Ry-
Ry-

Reputation: 224859

You need to add a complete handler. http://api.jquery.com/animate/

Upvotes: 1

Related Questions