동일한 액션에서 fadeOut() 및 fadeIn()을 사용합니다.

Question

나는 언어 선택을 만들기 위해 JQuery를 사용하려고하는데, 한번 선택하면 동시에 페이드 아웃합니다. 페이드 인을 사용하여 두 번째 탐색을 표시합니다.

이 내 마크 업

div id="content"> 
     <img src="img/logo.png"> 
     <ul id="navLang"> 
      <li><a href="#" id="EN">English</a></li> 
      <li><a href="#" id="ES">Español</a></li> 
     </ul> 
     <div id="navEng"> 
      <ul > 
       <li><a href="#">Beauty</a></li> 
       <li><a href="#">Campaign</a></li>   
       <li><a href="#">Editorial</a></li> 
       <li><a href="#">Biography</a></li> 
       <li><a href="#">Contact</a></li> 
      </ul> 
     </div> 
     <div id="navEs"> 
      <ul> 
       <li><a href="#">Belleza</a></li> 
       <li><a href="#">Campañas</a></li>   
       <li><a href="#">Editorial</a></li> 
       <li><a href="#">Biografía</a></li> 
       <li><a href="#">Contacto</a></li> 
      </ul> 
     </div> 
    </div> 

이며,이 내 스크립트

$(document).ready(function() { 
    $("#navEng").hide(); 
    $("#navEs").hide(); 
    $("#EN").click(function(){ 
     $("#navLang").fadeOut("slow"); 
     $("navEng").fadeIn("Slow"); 
    }); 
    $("#ES").click(function(){ 
     $("#navLang").fadeOut("slow"); 
     $("navEs").fadeIn("Slow"); 
    }); 
}); 

효과가 잘 작동 페이드 아웃이지만, 내가 두 번째 탐색이 페이드 할 수 없습니다, 나는 시도했다 디스플레이 사용 : 없음; 이전에도 마찬가지 였지만 이드는 아무 일도하지 않았다.

기본적으로, display : none을 사용하여 navs를 숨길 때; 나는 그 (것)들을 퇴색하게하고 .hide()를 사용할 때 숨길 수 없다.

Answer 1

당신이 당신의 선택기에서 #을 포함해야 ID를 기준으로 요소를 선택하려는 경우, 즉 $("#navEng") 대신 $("navEng") (등)입니다 :

$(document).ready(function() { 
    $("#navEng").hide(); 
    $("#navEs").hide(); 
    $("#EN").click(function(){ 
     $("#navLang").fadeOut("slow"); 
     $("#navEng").fadeIn("slow"); 
    }); 
    $("#ES").click(function(){ 
     $("#navLang").fadeOut("slow"); 
     $("#navEs").fadeIn("slow"); 
    }); 
}); 

편집 : 기능인 자바 스크립트는 경우가 있습니다 예 : "slow"은 "Slow"이 아니라 소문자 "s"로 표시해야합니다 (.fadeIn()은 인식 할 수없는 문자열을 전달할 경우 기본값은 400ms입니다).

$("#navLang").fadeOut("slow", function() { 
     $("#navEng").fadeIn("slow"); 
    }); 

데모 : http://jsfiddle.net/vmECd/

Answer 2

$("#navLang").fadeOut("slow"); 
     $("#navEng").fadeIn("Slow"); // apply "#" 

을하고 더 나은 방법 등으로 할 수있는 당신이 페이드 아웃이 완료 될 때까지의 페이드를 시작하지 않은 경우 그리고 그것은 아마 더 만족스러운 효과 것 참조 fadeOut,

$(document).ready(function() { 
    $("#navEng,#navEs").hide(); 
    $("#EN").click(function(){ 
    $("#navLang").fadeOut("slow",function(){ 
    $("#navEng").fadeIn("Slow"); // apply "#" 
    }); 

    }); 
    $("#ES").click(function(){ 
    $("#navLang").fadeOut("slow",function(){ 
    $("#navEs").fadeIn("Slow"); // apply "#" 
    }); 
}); 

}); 

아래 ,