Question

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.

Answer 1

I was able to implement it this way:

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

Seemed like the most straight forward way.