jquery fadein在子div元素中不fadein

Question

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

我的问题是，如果我在#home div...whenever中创建了一个子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...it听起来像是你只想隐藏直接的子级，然后淡入适当的子级，这将会做到这一点。如果这还不能解决问题，请告诉我。