jQuery Toggle Issue - 페이딩 divs in and out

Question

사용자가 ID을 사용하여 목록 항목을 클릭하고 해당 목록 항목과 연결된 div을 표시 한 다음 다른 목록 항목을 클릭하면 첫 번째 div가 사라지고 새 div이 페이드 인하는 간단한 토글을 작성하려고합니다. <li id="1">를 누른 다음 <li id="3">를 누른 다음 1로 돌아 가면 제대로 작동합니다.

여기까지 내 코드가 있습니다.

$(document).ready(function() { 
    $('#list li').toggle(function() { 
     var $value = ($(this).attr('id')); 
     $('#song' + $value).fadeIn(); 
    }, 
    function() { 
     $('#song' + $value).fadeOut(); 
     var $value = ($(this).attr('id')); 
     $('#song' + $value).fadeIn(); 
    }); 
}); 

고마워! 무광택

Answer 1

현재 표시된 div를 페이드 아웃하는 더 쉬운 방법은 :visible 셀렉터를 사용하는 것입니다. 내가 제대로 질문을 이해한다면 또한, 나는 당신이 단지 .toggle()보다는 .click()를 사용하여 원하는 동작을 달성 할 수 있다고 생각 :

$('#list li').click(function() { 
    $('#your_container').find('div:visible').fadeOut(); 
    $('#song' + this.id).fadeIn(); // simpler, no intermediate variable needed 
});