CODEWITHSUNDEEP
jqueryjquery-animate
darethas
darethas

Reputation: 7657

jQuery animations: fadeIn() hidden div, not showing content

I have a button with the id of "start_game" that has an attached click function and a callback to fade the button out, and then fade in a div that is currently set by css to display:none.

When I click the button, I see that the outer container div that holds all of this expands as if to make room for the div that is to be displayed, however I never see the content that I have inside of it.

Here is the current code:

$("#start_game").click(function () {
        $(this).fadeOut();
        $(".input-append").fadeIn();
    });

and the html

<div class="hero-unit">
        <div id="container">
            <p>Shall we?</p>
            <button class="btn-primary btn-large" id="start_game">Play!</button>
            <div class="input-append hidden">
                <p>How many players?</p>
                <input class="span2" id="appendedInputButton" type="text" />
                <button class="btn" type="button">Go!</button>
            </div>
        </div>
    </div>

here is the only custom css, the other css file is twitter bootstrap

.hidden {
display: none;
}

Now I have tried numerous approaches. I have tried fadeIn, I've tried chaining together a few different combinations of show() or hide() or toggle() or fadeToggle(). I have also tried attaching to the callback an iteration of all the child elements of the hidden div and doing fadeIn() one by one on them, nothing seems to be working.

I am testing in Google Chrome 26 and IE10.

Thanks for any help!

Upvotes: 3

Views: 6937

Answers (2)

Malik Zahid
Malik Zahid

Reputation: 745

Try this

$("#start_game").click(function () {
    $(this).fadeOut();
    $(".input-append").fadeIn("slow").removeClass('hidden');
});

Upvotes: 0

dbrin
dbrin

Reputation: 15673

I just ran into the same scenario. If I mark a twitter bootstrap control group hidden initially and then use show() method the outer div of the control group it is indeed shown but the contents of that control group div are still hidden.

The reason for that is bootstrap CSS looks for .hidden class to add visibility CSS rules to the inner divs as well, but the JQuery show() method does not remove the hidden class. It manipulates the CSS directly leaving the hidden class in place.

You can use removeClass('hidden') to remedy that problem.

Now the bonus question: how do we animate that transition??

And the answer is: fadeIn().removeClass('hidden'); Not very intuitive but hey, it works :)

Upvotes: 10

Related Questions