jquery fadein不會淡入淡出div元素

Question

我有一個看似簡單的問題。當我點擊一個按鈕時，我正在使用jquery淡入/淡出標有#home的div內的一些內容。

我的問題是，如果我創建#home格內的孩子DIV ......每當我點擊按鈕#home在漸退，孩子的內容DIV不褪色。

但是，任何孩子，「p」或「img」都會起作用，並且會褪色，但不包括孩子「div」中的內容。請幫忙！！

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

更改此：

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

要這樣：

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

ÿ我們的.fadeOut()正在淡出孩子div 和這些，任何後代的div ...聽起來你只想隱藏直接的孩子，然後在適當的一個淡出，這將做到這一點。讓我知道如果這不解決它。