9

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

bushdiver
  • 751
  • 3
  • 12
  • 21

1 Answers1

29

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

Fabrício Matté
  • 69,329
  • 26
  • 129
  • 166
  • hmm, that toggle event is awesome. If I toggle the same targeted element (the animated elem) with another toggle event attached elsewhere, will the toggle event associated to '#content' recognize that the targeted element has already been toggled? – bushdiver Jan 12 '13 at 21:33
  • Eh I guess not. Toggle is very limited. I'm pretty sure it just toggles when fired from the same handler. You could, theoretically, `.trigger('click')` on the element which has a toggle event associated with and it'd work then. Toggle is mostly for simple stuff though, if you need a robust solution, keep your manual toggling. `=]` – Fabrício Matté Jan 12 '13 at 21:34
  • @bushdiver This is an example of what I meant in the last comment: http://jsfiddle.net/XVZRc/ - you can see, it gets a little more complicated so keeping a flag as you did initially is probably more concise then. – Fabrício Matté Jan 12 '13 at 21:40