CODEWITHSUNDEEP
jquery
Rees
Rees

Reputation: 1787

jquery fadein does not fadein child div elements

I have an seemingly simple question. I am using jquery to fade in/out some content within a div labeled #home when I click a button.

My issue is that if I create a child DIV within the #home div...whenever I click the button for #home to fade back in, the contents of the child DIV does NOT fade in.

However, any child, "p" or "img" works and will fade back in just fine, but not the contents within the child "div". Please help!!

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);
});

Upvotes: 2

Views: 5051

Answers (1)

Nick Craver
Nick Craver

Reputation: 630349

Change this:

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

To this:

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

Your .fadeOut() is fading out the child divs and the div within those, any descendant div...it sounds like you want to hide only the direct children then fade back in the appropriate one, this will do that. Let me know if that doesn't solve it.

Upvotes: 2

Related Questions