jQuery fade content

Question

У меня есть меню навигации, которое после щелчка пользователя затем меняет и исчезает содержимое. Проблема в том, что даже дочерний узел стал скрытым. Если я удалю весь дочерний узел моего div id = "witness" и id = "believe", тогда он отлично работает. Как исключить дочерний узел div id = "witness" или id = "believe"?

Заранее спасибо.

вот мой Javascript

$(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(); 
      }) 

    }); 
}); 

вот мой 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(); 

Чтобы просто соответствовать непосредственным потомкам " Описание»элемент, которые видны, вы можете использовать этот код вместо:

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

Для получения дополнительной информации см jQuery Traversing API documentation.

Answer 2

Если исчезать элемент, затем все его содержимое затемнены, так что нет никакого способа, чтобы исключить некоторые дочерние элементы формируют анимацию. Мое предложение было бы использовать более конкретный селектор, чтобы выбрать элементы, которые вы действительно хотите погасить.