CODEWITHSUNDEEP
javascriptjqueryhtmlcsstwitter-bootstrap
Darshan
Darshan

Reputation: 1011

Make bootstrap div fade out when adding 'hidden' class

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 accomplish this.

Upvotes: 3

Views: 8334

Answers (2)

Zaheer Ahmed
Zaheer Ahmed

Reputation: 28558

Bootstrap hidden class is:

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

You can easily achieve this:

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

Upvotes: 2

Praveen Kumar Purushothaman
Praveen Kumar Purushothaman

Reputation: 167192

Use something like this:

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

Upvotes: 2

Related Questions