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

/

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..

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..

• javascript
• jquery
• animation

• Please clarify. Preferably with images. a link to fiddle would become useless once it's removed/changed – Matanya Commented Jan 12, 2013 at 21:16
• Which width do you want to squish? – hugo der hungrige Commented Jan 12, 2013 at 21:18

1 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