jquery fadein 不会淡入子 div 元素

Question

我有一个看似简单的问题。当我单击按钮时，我使用 jquery 淡入/淡出标记为 #home 的 div 中的某些内容。

我的问题是，如果我在 #home div 中创建一个子 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、任何后代div...听起来您只想隐藏直接的div然后让 children 淡入适当的一个，这样就可以了。如果这不能解决问题，请告诉我。