jQuery Callback Weing Weird

Question

정말 간단해야하는 작업을하려고하지만 분명히 최선의 방법으로 수행하지 않습니다.

저는 기본적으로 일부 요소를 사라지게하고 어떤 링크를 클릭했는지에 따라 다른 그룹을 퇴색 시키려고합니다. 여기

는 바이올린입니다 : http://jsfiddle.net/redenvy/sTzna/1/ 당신이 요소가 서로에 실행 한 다음 내용이와 여분의 시간이 페이드 아웃 것으로 보인다 볼 수 있듯이 jQuery를

을 선택해야합니다.

도움을 주시면 감사하겠습니다.

HTML :

<div class="row module-intro main"> 
    <a href="#" id="new">New</a> 
</div> 

<div class="row module-intro new hidden"> 
    <a href="#" id="main">Cancel</a> 
</div> 

<div class="row main"> 
    <p>MAIN CONTENT</p> 
</div> 

<div class="row new hidden"> 
    <p>NEW CONTENT</p> 
</div> 

CSS :

.hidden { 
    display:none; 
} 

자바 스크립트 :

$(document).ready(function() { 
    $('.module-intro a').click(function(){ 
    var id = $(this).attr('id'); 
    $('.row').fadeOut(600,function(){ 
     $('.row.'+id).fadeIn(800); 
    }); 
    }); 
}); 

Answer 1

당신은 단지 현재 표시된 것들로 시작하는 .row 모든 요소를 ​​애니메이션된다. 이 전환해야합니다

$(document).ready(function() { 
    $('.module-intro a').click(function(){ 
    var id = $(this).attr('id'); 
     $('.row:visible').fadeOut(600,function(){ 
     $('.row.'+id).fadeIn(800); 
    }); 
    }); 
}); 

Answer 2

을 당신은 사업부도의 숨겨진에서 퇴색하고, this

Answer 3

을 시도 할 이유입니다 이것은 당신이 아직 숨겨져있는 모든.row 요소를 을 페이드 아웃하고 있기 때문에 , 그리고 콜백은 그 하나를 위해 조기에 해고된다.

대신 숨겨진 것을 움직이게해서는 안됩니다.

$('.row:not(.' + id + ')').fadeOut(600, function() { 
// ... 

http://jsfiddle.net/sTzna/14/