jQuery动画:fadeIn()隐藏的div，不显示内容 [英] jQuery animations: fadeIn() hidden div, not showing content

问题描述

我有一个ID为"start_game"的按钮，该按钮具有附加的单击功能和回调，以淡出该按钮，然后淡入由CSS当前设置为display:none的div.

当我单击按钮时，我看到容纳所有这些内容的外部容器div似乎在为要显示的div腾出空间，但是我从未看到其中包含的内容./p>

这是当前代码:

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

和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>

这是唯一的自定义css，另一个css文件是twitter bootstrap

.hidden {
display: none;
}

现在，我已经尝试了许多方法.我尝试了fadeIn，尝试将show()或hide()或toggle()或fadeToggle()的几种不同组合链接在一起.我还尝试过将隐藏div的所有子元素的迭代附加到回调上，并在它们上逐个进行fadeIn()，似乎没有任何效果.

我正在Google Chrome 26和IE10中进行测试.

感谢您的帮助！

解决方案

我只是遇到了相同的情况.如果我将一个twitter引导程序控制组标记为最初隐藏，然后使用show()方法将该控制组的外部div确实显示，则该控制组div的内容仍被隐藏.

这样做的原因是引导CSS也会寻找.hidden类，以便向内部div添加可见性CSS规则，但是JQuery show()方法不会删除隐藏的类.它直接操纵CSS，将隐藏的类留在原地.

您可以使用removeClass('hidden')来解决该问题.

现在有一个额外的问题:我们如何动画这种过渡?

答案是:fadeIn().removeClass('hidden');不是很直观，但是，它很有效:)

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!

解决方案

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 :)

这篇关于jQuery动画:fadeIn()隐藏的div，不显示内容的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！