fadeOut이 예상대로 작동 한 후 콜백 함수로 fadeIn

Question

내 HTML에 navInnerMapR 및 # navInnerMapL이 div # navTwo에 포함되어 있습니다.

다음 코드는 함수 내에 있습니다. 호출 될 때 div # navTwo에 보이는 링크를 fadeOut하되 잠시 멈추고 navInnerMapR을 페이드 인하는 함수가 필요합니다.

$('div#navTwo a').fadeOut(200, function() { 
    $('a#navInnerMapR').delay(100).fadeIn(200); 
}); 

이 코드는 링크를 페이드 아웃하지만 아무것도 퇴색하지 않습니다. 나는 그들이 페이드 아웃이 완료되면에만 시작할 것 지연 생각하지만 가끔 작동하지만 매우 버그하게 1000 지연 값을 변경. http://jsfiddle.net/jamesbrighton/d9QKr/5/

UPDATE 사과는 내 질문에 나던 내가 달성하기 위해 필요한의 전체 세부 사항을 포함한다 : 감사

UPDATE 여기에 숨겨진 링크가 가시가 숨겨져되기 전에 표시하기 시작 것을 보여주는 바이올린입니다. 나는 쉽게 해결할 수있는 일종의 sytax issus를 가지고 있다고 생각하면서 그것을 단순화했습니다.

div # navTwo에는 실제로 3 개의 링크가 포함되어 있습니다. 어느 시점 (애니메이션이 실행되기 전의 지연 시간 제외)에서는 오직 하나의 링크 만 보입니다. 표시되는 다른 2 개의 링크 중 하나를 숨기고 # navInnerMapR을 표시하는 함수를 호출 할 수 있어야합니다.

다른 이벤트가이 함수를 호출하므로 navInnerMapR이 아닌 두 링크 중 하나가 표시 될 수 있습니다. 감사합니다

업데이트이 바이올린 문제를 보여줍니다 생각합니다. 필자는 서로 다른 주를 설명하기 위해 2 개의 div.nav를 만들었습니다. 필자는 인라인 CSS와 각각 다른 숨겨진 링크를 숨겼습니다. JavaScript는 내 div의 링크를 반복적으로 표시하고 숨길 것이므로 같은 div는 각기 다른 시간에 각 예제처럼 보일 것입니다.

Ive는 서로 다른 이벤트가 함수를 호출해야한다는 것을 설명하기 위해 2 개의 트리거를 생성했습니다. 트리거를 클릭하면 두 예제 모두에서 문제를 볼 수 있습니다. 표시되는 div는 a.one이 표시되기 전에 숨겨지지 않습니다. 양해 해 주셔서 감사합니다.

http://jsfiddle.net/jamesbrighton/dYvMS/24/

재미있는 점, 나는 $를 변경하는 경우 ('탐색 a.one.') fadeIn (1000).; 경고에, 경고는 여러 번 발사됩니다! 왜 이런 경우가 될지 모르겠다!

Answer 1

편집 : 당신의 아래 코멘트에 따라 업데이트 대답

예 이것은 내가 필요로 작동하지만, 내 실제 페이지에 대해 작동합니다 확실하지 메신저. 제 질문에 대해 충분히 자세히 설명하지 않아서 미안합니다. 내가 준 예제 코드 은 단순화되었습니다. 실제 페이지에서 div # navTwo 내의 3 개의 링크가 있으며 언제든지 그 중 하나만 표시됩니다. I 은 링크를 숨기고 특정 하나의 함수를 호출 할 수 있어야하지만 div # navTwo에있는 다른 2 개의 링크 중 하나는 일 수 있습니다.감사합니다

DEMO

HTML :

$('.links').click(function() { 
     showHide($(this)); 
}); 

function showHide($this) {  
    $this.fadeOut(1000, function() { 
     $('#navTwo a').not($this).delay(1000).fadeIn(1000); 
    }); 
} 

---

: navTwo 내부의 모든 링크

<div id="navTwo"> 
    <a href="#" id="navInnerMapR" class="links">Right</a> 
    <a href="#" id="navInnerMapL" class="links">Left</a> 
    <a href="#" id="navInnerMapM" class="links">Middle</a> 
    <a href="#" id="navInnerMapU" class="links">Upper</a> 
    <a href="#" id="navInnerMapLW" class="links">Lower</a> 
</div> 

JS에 추가 클래스3210

나는 네가 필요한 것을 이해했다고 생각한다. DEMO 아래 시도하고 당신이 원하는 경우 알려주세요, 당신이 말했듯이

DEMO

$('#navInnerMapR').click(function() { 
     runMeR($(this)); 
}); 
$('#navInnerMapL').click(function() { 
     runMeL($(this)); 
}); 

function runMeR($this) {  
    $this.fadeOut(1000, function() { 
     $('a#navInnerMapL').delay(1000).fadeIn(1000); 
    }); 
} 
function runMeL($this) {  
    $this.fadeOut(1000, function() { 
     $('a#navInnerMapR').delay(1000).fadeIn(1000); 
    }); 
} 

Answer 2

, 당신은 DIV 번호 navTwo에 보이는 링크를 페이드 아웃하는 기능이 필요합니다, 잠시 동안 일시 중지 # navInnerMapR을 페이드 인하십시오 (다른 링크가 아닌 # navInnerMapR 만).

$('#navTwo a').click(function(e) { 
    $(this).parent().children().each(function(i){ 
     $(this).fadeOut('slow', function(){ 
      $('a#navInnerMapR').delay(1000).fadeIn(1000); 
     }); 
    }); 
});​ 

바이올린은 here입니다.