CODEWITHSUNDEEP
jquerytwitter-bootstrap
Greg Pettit
Greg Pettit

Reputation: 10830

Show and then fade element with Bootstrap

Bootstrap 3 with the transitions module includes some utility classes for animating the showing and hiding of elements via fade. When you have an element with a class of fade, its opacity is 0. Then when you add the class "in" to it, it animates to opacity to 1.

The problem with this is that the element is not display:none, so it takes up space.

Bootstrap also includes the utility class "hide" which does the display:none part for you. Here is a sample of a fully-hidden element in HTML, using these utility classes:

<div id="sample" class="hide fade">
  Originally hidden and faded out, then shown and faded in
</div>

In theory you should be able to un-hide (convert to block) and then fade in, like this:

$('#sample').removeClass('hide').addClass('in');

However, this doesn't work. There's something about the internal timing of the browser. I'm not sure what. The net result is that the element is shown, but there is no fade animation. Or at least in Chrome; I'll admit I didn't test other browsers because this needs to work in Chrome anyhow.

Now, I DO have a solution. I delay the adding of 'in' by a brief moment. This causes it to work appropriately:

var $sample = $('#sample');
$sample.removeClass('hide');
setTimeout(function() {$sample.addClass('in')}, 100);

Heck, I can even abstract this as a utility function and be done with it. But there's the overly-curious (and pedantic) part of me that wonders if this hack is necessary, or if I'm missing something. Does anybody see a better and non-hacky-feeling way of doing this?

Here's a jsfiddle (some markup changes to allow both test cases at once): https://jsfiddle.net/pmd6ow7r/

Upvotes: 5

Views: 9353

Answers (2)

Sky7ure
Sky7ure

Reputation: 420

Keep it visible as it is, but hide it using jQuery...

<script>
    $(function() {
        $("#sample")
            .hide() // hides it first, or style it with 'display: none;' instead
            .fadeIn(300) // fades it in
            .delay(3260) // (optionally) waits
            .fadeOut(300); // (optionally) fades it out
    });
</script>

Upvotes: 4

guramidev
guramidev

Reputation: 2238

You can not animate display:none item because it is been ignored by parsing engine. What you can do instead of a timeout function is not to use display:none, but instead hide the element with height:0 like shown in the fiddle https://jsfiddle.net/pmd6ow7r/3/

so basically you don't use hide bootstrap class and use your custom lets say custom-hide

.custom-hide {
   height:0;
   overflow:hidden;
}

Upvotes: 2

Related Questions