I am using Bootstrap for css and I need help in fading out a div when the class 'hidden' is toggled.

My site structure is pretty simple: there are 3 main container divs: search, wait and show. Essentially, show is the lowest positioned one, wait is on top of show and search is at the very top.

All I need is for search to fade out over 3 seconds when this Jquery event is fired:

    $('.search').toggleClass('hidden');

I don't want it to just instantly disappear. Same with the wait div. I have tried using

    $(".searchBar").fadeOut("slow", function() {
        $('.searchBar').toggleClass('hidden');
    });

But it doesn't work. The fadeout/fadein don't seem to have any visible effect. Since the hidden class is already in bootstrap, I do not want to create another custom one; there's got to be a way to acplish this.

I am using Bootstrap for css and I need help in fading out a div when the class 'hidden' is toggled.

My site structure is pretty simple: there are 3 main container divs: search, wait and show. Essentially, show is the lowest positioned one, wait is on top of show and search is at the very top.

All I need is for search to fade out over 3 seconds when this Jquery event is fired:

    $('.search').toggleClass('hidden');

I don't want it to just instantly disappear. Same with the wait div. I have tried using

    $(".searchBar").fadeOut("slow", function() {
        $('.searchBar').toggleClass('hidden');
    });

But it doesn't work. The fadeout/fadein don't seem to have any visible effect. Since the hidden class is already in bootstrap, I do not want to create another custom one; there's got to be a way to acplish this.

• javascript
• jquery
• html
• css
• twitter-bootstrap

• Add opacity: 0; and a CSS transition to .hidden class. – Kyle Commented Sep 8, 2014 at 12:15

2 Answers 2

Bootstrap hidden class is:

.hidden {
  display: none;
  visibility: hidden;
} 

You can easily achieve this:

$('.searchBar').toggle( "slow");

Use something like this:

$(".searchBar").fadeOut("slow", function() {
    $('.searchBar').addClass('hidden').show(0);
});