jQuery animate width to the right

Question

I want to animate div to slide to the right like the example below:

http://jsfiddle.net/56hxy/3/

but instead of shifting the margin, I want to "squish" the width but it's not working by changing the width % ( width: '60%' ) it squishes to the left instead..

Answer 1

Not sure if this is exactly what you're looking for but try:

$('#content').animate({
    marginLeft: '40%',
    width:'60%'
});

Fiddle

---

Or give right:0 to #content in the CSS, then you can animate the width and it will shrink from left to right without requiring margins. Same effect as the above but cleaner. Fiddle

Also, jQuery has a built-in "toggle event" for alternating clicks so, if you're toggling just the click event you can use:

$('#content').toggle(function() { 
    $(this).animate({ width:'60%' }); 
}, function() {
    $(this).animate({ width:'100%' }); 
});

Fiddle