jQuery 페이드, 애니메이션 및 토글?

Question

나는 Forrst에서이 질문을하고 두 가지 코드 응답을 받았습니다. 한 사람은 일했고 한 사람은 그렇지 않았습니다. 나는 누군가가 내게 왜 두 번째 것이 효과가 없는지 설명 할 수 있기를 바랬다.

내 목표는 기본적으로 내 검색을 숨기는 것이 었습니다. 검색 아이콘을 클릭하면 검색이 페이드 인되도록 전환하고 왼쪽으로 약간 이동합니다. 검색 아이콘을 다시 클릭하면 페이드 아웃되고 오른쪽으로 이동합니다.

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

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

사람이 두 번째 코드와 어떤 문제를 볼 수 있습니까 : 여기

$(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'); 
    } 
);  

}); 

내가 검색 아이콘 아무것도 클릭 할 때 그 코드가 어떻게됩니까입니다 : 여기

일했다 코드입니다 뭐야?

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++; 
}); 
});