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 ......听起来你只想隐藏直接的孩子然后重新回归适当的，这将做到这一点。如果这不能解决它，请告诉我。

jquery fadein不会淡化子div元素

1 个答案: