jqueryのパーセンテージを使用してdivの幅をアニメーション化する

Question

ボタン（この場合は別のdiv）をクリックすると、divの幅をパーセンテージで変更しようとしています。私はこのexampleで作業していますが、私のサイトの実際のコードでは正常に再作成できません。その例はhereです。彼らはどちらも私の目と同じですが、何かが間違っているようです。

$('#button').click(function() { 
if(!collapsed){ 
    $('.left').animate({width: '10%'}); 
} else { 
    $('.left').animate({width: '50%'}); 
} 
collapsed = !collapsed; }); 

さらに、それの少なくとも第2の例では、何も結果：

使用されたJavaScriptです。バージョンと

Answer 1

2つの問題：

1. jsFiddleはjQueryのを含んでいませんでした。
2. collapsed変数を定義していないため、コンソールでエラーが発生していました。

これらの問題を修正して解決します。また、アニメーションキューを埋める連続クリックを防ぐためにanimate()を呼び出す前stop(true)を追加する価値があるかもしれ

var collapsed = false; 
$('#button').click(function() { 
    $('.left').animate({ width: collapsed ? '50%' : '10%' }); 
    collapsed = !collapsed; 
}); 

Working example

：また、あなたは幅が三元表現を使用してワンライナーを変更することができますことに注意してください。