Animate width left to right

Question

I am trying to find a way to animate a div using jQuery to shrink the width from left to right.

I have the element on click at first:

• slide in from left to right
• then have it continue to the right off my div, like it just keeps moving off the page, comes in and click again comes off. I have the toggle function in and working properly, but I am not sure how to make it keep moving off the page.

Any ideas?

Answer 1

Shrink it right to left (like you know how to), but simultaneously increase the left position style, or the left margin.

Something like:

var distance = $("div").css("width");

$("div").animate({
"width": "0",
"marginLeft": distance
});

Answer 2

you need to set the margin property. But you'll also want to position it absolutely if there's any elements either side of it.