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

これがまさにあなたが探しているものかどうかはわかりませんが、試してみてください：

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

フィドル

---

または、CSS で指定すると、アニメーション化でき、right:0余白を必要とせずに左から右に縮小されます。上記と同じ効果ですが、よりクリーンです。フィドル#contentwidth

また、jQuery には、交互にクリックするための "トグル イベント" が組み込まれているため、クリック イベントだけを切り替える場合は、次のように使用できます。

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

フィドル