jQueryのフェード、アニメーション、トグル？

Question

私はForrstでこの質問をし、2つのコード応答を受けました。 1人は働き、1人は働きませんでした。私は誰かが私になぜ2番目のものがうまくいかないのかを説明できることを望んでいました。

私の目標は、デフォルトでは自分の検索を隠すことでした。検索アイコンをクリックすると、検索がフェードインに切り替わり、少し左に移動します。再度検索アイコンをクリックすると、フェードアウトして右に移動します。ここで

は働いていたコードです：

$(function() { 
    var search = $('#searchform'); 
    search.css('opacity', 0); 

    $('#search-img').toggle(function() { 
    search.animate({opacity: 1}, {queue: false, duration: 'slow'}); 
    search.animate({ left: "-10px" }, 'slow'); 
    }, 
function() { 
    search.animate({opacity: 0}, {queue: false, duration: 'slow'}); 
    search.animate({ left: "+10px" }, 'slow'); 
    } 
);  

}); 

ここで私は、検索アイコンをクリックしても何も起こらないというコードです：

$(function() { 
var search = $('#searchform').css('opacity', 0), 
    i = 0; 

$('#search-img').click(function() { 
    search.animate({opacity: 'toggle', left: i % 2 == 0 ? 0 : -10}); 
    i++; 
}); 
}); 

誰が第二のコードでどのような問題を参照していが、ありますか？

Answer 1

varはグローバル変数ではないため、利用できません。 $（）の中で何かをグローバルにするには、それをウィンドウオブジェクトに代入するだけです。私がすることを試みたとき、私はこのエラーを取得しています

$(function() { 
var search = $('#searchform').css('opacity', 0), 
    window.i = 0; 

$('#search-img').click(function() { 
    search.animate({opacity: 'toggle', left: i % 2 == 0 ? 0 : -10}); 
    window.i++; 
}); 
});