2013-01-12 9 views
6

右に幅をアニメーション化:はjQueryの私は、以下の例のように右にスライドさせるのdivをアニメーション化する

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

代わりにマージンをシフトする、私は「スキッシュ」の幅をしたいが、それはです...幅%(width: '60%')ではなく左にsquishesを変更することで動作していない

+0

明確にしてください:Fiddle

また、jQueryのは、あなただけのクリックイベントをトグルしている場合に使用することができますので、クリックを交互ための組み込みの「は」持っています。好ましくは画像で。あなたが削除/変更されると、フィドルへのリンクは役に立たなくなるでしょう – Matanya

+0

あなたはどのくらいの幅にしたいですか? –

答えて

19

これはあなたが探してみてくださいしかししているまさにであるかどうかわからない:

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

Fiddle


またはCSSで#contentright:0を与え、あなたはwidthをアニメーション化することができ、それがマージンを必要とせずに、左から右へと縮小されます。上記と同じ効果がありますがクリーナーです。

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

Fiddle

+0

は完璧な感覚です、ありがとう – bushdiver

+0

うん、そのトグルイベントは素晴らしいです。同じターゲット要素(アニメーション要素)を別のトグルイベントとトグルすると、 '#content'に関連付けられたトグルイベントは、ターゲット要素が既に切り替えられていることを認識しますか? – bushdiver

+0

私はそうは思わない。トグルは非常に限られています。私はそれが同じハンドラから発射されたときにはちょうどトグルすると確信しています。理論的には、トグルイベントが関連付けられている要素に対して、「.trigger( 'click')」することができます。トグルはほとんどの場合単純なものですが、堅牢なソリューションが必要な場合は、手動でトグルしてください。 '=]' –

関連する問題