CODEWITHSUNDEEP
javascriptjqueryanimation
bushdiver
bushdiver

Reputation: 771

jQuery animate width to the right

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

Upvotes: 11

Views: 44539

Answers (1)

Fabrício Matté
Fabrício Matté

Reputation: 70199

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

Upvotes: 32

Related Questions