jquery fade content

Question

일단 사용자가 클릭 한 다음 내용을 변경하고 사라지게하는 탐색 메뉴가 있습니다. 문제는 심지어 자식 노드가 숨겨져 있다는 것입니다. 내 div id = "witness"및 id = "believe"의 자식 노드를 모두 제거하면 정상적으로 작동합니다. div id = "witness"또는 id = "believe"의 하위 노드를 제외하는 방법은 무엇입니까?

미리 감사드립니다. 여기

는 모든 내용이 페이드 아웃되는 다음, 을 요소를 페이드 아웃하면 내 HTML

<div align="center" id="content-linkwrap"><a href="#" class="link-black hrefmenu" id="witness-href">WITNESS</a><a href="#" class="link-black hrefmenu" id="believe-href">BELIEVE</a></div> 

     <div id="description"> 
      <div id="witness" class="desc">    
       <div class="top"><div class="bottom"><div class="left"><div class="right"><div class="bl"><div class="br"><div class="tl"><div class="tr"> 
        <div style="padding: 40px 20px;"> 
         <h3 class="text-orange">WITNESS</h3> 
         <p class="aboutus wpad10" align="justify">To a company that has initiated major retail projects representing more than US $10 million in investments. 
         </p> 
         <p class="aboutus" align="justify">To a conglomerate so solid and expansive with far-reaching business interests and investments in food service, real estate, electronics, heavy equipment, jewelry trading, travel, and hardware trading that spans the Philippines, Hong Kong, Singapore and Malaysia. </p>     
        </div>      
        <div class="clearleft"></div> 
       </div></div></div></div></div></div></div></div> 
      </div> 

      <div id="believe" class="desc">     
       <div class="top"><div class="bottom"><div class="left"><div class="right"><div class="bl"><div class="br"><div class="tl"><div class="tr"> 
        <div style="padding: 40px 20px;"> 
         <h3 class="text-orange">BELIEVE</h3> 
         <p class="aboutus wpad10" align="justify">In a corporation that toasts not only the successes – but also the opportunities. 
         </p> 
         <p class="aboutus wpad10" align="justify">In a business entity that puts a high premium on freedom and creative participation of its people at all levels…</p> 
         <p class="aboutus wpad10" align="justify">In a management that is committed to corporate expansion, to the personal growth of its people, and to partnerships and ventures that are mutually beneficial…</p>    
        </div>      
        <div class="clearleft"></div> 
       </div></div></div></div></div></div></div></div> 
      </div>              
     </div>  

Answer 1

현재는 찾기가()도 모든 자식 'DIV'요소 깊은 '설명'요소 아래에 중첩 된 것과 일치하는 다음을 가지고 :

$("#description").find("div:visible").fadeOut(); 

단지의 직계 자식을 일치 시키려면

' jQuery Traversing API documentation 자세한 정보는

$("#description").children().filter(":visible").fadeOut(); 

: 볼 수 있습니다 설명 '요소는 대신이 코드를 사용할 수 있습니다.

Answer 2

내 자바 스크립트 여기

$(function(){ 
    $("#content-linkwrap .hrefmenu").click(function(){ 

     $clicked = $(this); 
     // if the button is not already "transformed" AND is not animated 

      // each button div MUST have a "xx-button" and the target div must have an id "xx" 
      var idToLoad = $clicked.attr("id").split('-'); 

      //we search trough the content for the visible div and we fade it out 
      $("#description").find("div:visible").fadeOut("fast", function(){ 
       //once the fade out is completed, we start to fade in the right div 
       $(this).parent().find("#"+idToLoad[0]).fadeIn(); 
      }) 

    }); 
}); 

이다, 그래서 제외 할 수있는 방법은 없습니다 특정 자식 요소가 애니메이션을 형성합니다. 내 제안은 더 구체적인 선택기를 사용하여 실제로 페이드 아웃하려는 요소를 선택하는 것입니다.