I am trying to change the speed of a fade effect in Bootstrap. I found this answer using css:

@import url('.3.7/css/bootstrap.min.css');

.fade {
   opacity: 0;
   -webkit-transition: opacity 1.5s linear;
      -moz-transition: opacity 1.5s linear;
       -ms-transition: opacity 1.5s linear;
        -o-transition: opacity 1.5s linear;
           transition: opacity 1.5s linear;
 }

<div class="btn-group" role="group">
  <button class="btn active" data-toggle="tab" href="#one">One</button>
  <button class="btn" data-toggle="tab" href="#two">Two</button>
  <button class="btn" data-toggle="tab" href="#three">Three</button>
</div>
<div class="tab-content">
  <div id="one" class="tab-pane fade in active">This is the One</div>
  <div id="two" class="tab-pane fade">This is the Two</div>
  <div id="three" class="tab-pane fade">This is the Three</div>
</div>

<script src=".1.0/jquery.min.js"></script>
<script src=".3.7/js/bootstrap.min.js"></script>

I am trying to change the speed of a fade effect in Bootstrap. I found this answer using css:

@import url('https://maxcdn.bootstrapcdn./bootstrap/3.3.7/css/bootstrap.min.css');

.fade {
   opacity: 0;
   -webkit-transition: opacity 1.5s linear;
      -moz-transition: opacity 1.5s linear;
       -ms-transition: opacity 1.5s linear;
        -o-transition: opacity 1.5s linear;
           transition: opacity 1.5s linear;
 }

<div class="btn-group" role="group">
  <button class="btn active" data-toggle="tab" href="#one">One</button>
  <button class="btn" data-toggle="tab" href="#two">Two</button>
  <button class="btn" data-toggle="tab" href="#three">Three</button>
</div>
<div class="tab-content">
  <div id="one" class="tab-pane fade in active">This is the One</div>
  <div id="two" class="tab-pane fade">This is the Two</div>
  <div id="three" class="tab-pane fade">This is the Three</div>
</div>

<script src="https://ajax.googleapis./ajax/libs/jquery/3.1.0/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn./bootstrap/3.3.7/js/bootstrap.min.js"></script>

...but this only affects the fade-in time. The fade-out stays the same. Any suggestions?

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

3 Answers 3

There is no fade-out time, the class that makes the element visible just gets removed.

To make it fade-out, you have to make sure the item doesn't get removed from the dom (HTML document), but rather make it invisible so it can fade.

Here is an example, adjust to your wishes:

@import url('https://maxcdn.bootstrapcdn./bootstrap/3.3.7/css/bootstrap.min.css');

.tab-content {
  position:relative;
}

.tab-content>.tab-pane {
  /* in order to make sure the elements are nicely in position
     use position:absolute; */
  position:absolute;
  top:0;
}

.fade {
   opacity: 0;
   -webkit-transition: opacity 1.5s linear;
      -moz-transition: opacity 1.5s linear;
       -ms-transition: opacity 1.5s linear;
        -o-transition: opacity 1.5s linear;
           transition: opacity 1.5s linear;
 }

.tab-content>.tab-pane:not(.in) { 
  /* display:none; is the default behaviour, make that display:block; */
  display:block; 
  /* make the opacity 0, that is what the transition responds to! */
  opacity:0;
}

<div class="btn-group" role="group">
  <button class="btn active" data-toggle="tab" href="#one">One</button>
  <button class="btn" data-toggle="tab" href="#two">Two</button>
  <button class="btn" data-toggle="tab" href="#three">Three</button>
</div>
<div class="tab-content">
  <div id="one" class="tab-pane fade in active">This is the One</div>
  <div id="two" class="tab-pane fade">This is the Two</div>
  <div id="three" class="tab-pane fade">This is the Three</div>
</div>

<script src="https://ajax.googleapis./ajax/libs/jquery/3.1.0/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn./bootstrap/3.3.7/js/bootstrap.min.js"></script>

The issue is that when an item is not active, it's display property is set to display:none, and therefore is being hidden before any animation can be applied. If you position everything using absolute position to overlap, then you can leave the display as display:block and just change the opacity:

@import url('https://maxcdn.bootstrapcdn./bootstrap/3.3.7/css/bootstrap.min.css');

.fade {
   opacity: 0;
   -webkit-transition: opacity 1.5s linear;
      -moz-transition: opacity 1.5s linear;
       -ms-transition: opacity 1.5s linear;
        -o-transition: opacity 1.5s linear;
           transition: opacity 1.5s linear;
 }
.tab-content {
    position:relative;
}
.tab-content>.tab-pane {
   top: 0;
   position:absolute;
   display:block;
 }
.tab-content>.tab-pane:not(.active) {
    opacity: 0;
 }

<div class="btn-group" role="group">
  <button class="btn active" data-toggle="tab" href="#one">One</button>
  <button class="btn" data-toggle="tab" href="#two">Two</button>
  <button class="btn" data-toggle="tab" href="#three">Three</button>
</div>
<div class="tab-content">
  <div id="one" class="tab-pane fade in active">This is the One</div>
  <div id="two" class="tab-pane fade">This is the Two</div>
  <div id="three" class="tab-pane fade">This is the Three</div>
</div>

<script src="https://ajax.googleapis./ajax/libs/jquery/3.1.0/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn./bootstrap/3.3.7/js/bootstrap.min.js"></script>

If you simply want to avoid having the fade affect, or need the tabs to appear more quickly remove the fade class.

// Original

<div class="tab-content">
  <div id="one" class="tab-pane fade in active">This is the One</div>
  <div id="two" class="tab-pane fade">This is the Two</div>
  <div id="three" class="tab-pane fade">This is the Three</div>
</div>

// Updated

<div class="tab-content">
  <div id="one" class="tab-pane in active">This is the One</div>
  <div id="two" class="tab-pane fade">This is the Two</div>
  <div id="three" class="tab-pane fade">This is the Three</div>
</div>

The fade class is only applied to the first pane, then when the button is clicked then Jquery removes the active class and fade class and applies it to the corresponding pane.