jquery fadein ne fade pas enfant div éléments

Question

J'ai une question apparemment simple. J'utilise jquery pour faire un fondu entrant/sortant du contenu d'un div étiqueté #home lorsque je clique sur un bouton.

Mon problème est que si je crée un DIV enfant dans le #Page div ... chaque fois que je clique sur le bouton pour #Page à disparaître en arrière, le contenu de l'enfant DIV ne se fane pas dans.

Cependant, n'importe quel enfant, "p" ou "img" fonctionne et se fondra dans le bon sens, mais pas le contenu de l'enfant "div". S'il vous plaît aider !!

CSS:

#home { 
    display: block; 
    padding: 30px; 
} 
#home-button { 
    opacity: 1.0; 
    border-bottom: 1px solid black; 
} 
#about { 
    display: none; 
    padding: 30px; 
} 
#about-button { 
    opacity: 0.5; 
    border-bottom: 1px solid black; 
} 

JS:

$("#page-wrap div.button").click(function() { 
    $clicked = $(this); 

    // if the button is not already "transformed" AND is not animated 
    if ($clicked.css("opacity") != "1" && $clicked.is(":not(animated)")) { 
     $clicked.animate({ 
      opacity: 1, 
      borderWidth: 5 
     }, 600); 

     // 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 
     $("#content").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(); 
     }) 
    } 

    //we reset the other buttons to default style 
    $clicked.siblings(".button").animate({ 
     opacity: 0.5, 
     borderWidth: 1 
    }, 600); 
}); 

Answer 1

Changer ceci:

$("#content").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(); 
}) 

à ceci:

$("#content").children("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(); 
}) 

Y notre .fadeOut() éteint l'enfant divs et la div dans ceux-ci, tout div descendant ... il semble que vous voulez cacher seulement les enfants directs puis s'estomper dans le approprié, cela fera cela. Faites-moi savoir si cela ne le résout pas.