How can I change the speed of the fade for alert messages in Twitter Bootstrap?

Question

I'm using twitter bootstrap and the fade for the close on the alert box happens faster than I would like. Is there somewhere I can change the duration of the fade or perhaps even set it on a per alert basis?

Thanks

Answer 1

Dan Herman,

If you're not using less and you feel like editing the bootstrap.css you may try and edit this one and not to mess around with the .js file.

Edit

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

and make it into...

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

1.25s is not the default value, that's is just an example and if you apply that, you'll really notice the effect and the difference.

Now, if you want to create another variant of the fade selector, lets say, "myFade", then I think you need to modify the bootstrap-alert.js and add your new class selector or "myFade" class selector.

I don't know yet about javascript. I just thought you need to modify the bootstrap-alert.js and insert your new class.

Answer 2

It actually uses .transition(opacity .15s linear); in component-animations.less (line 5).

If you look on line 64 of bootstrap-alert.js you can see where it's referencing the class. Change .15s to what you want it to be and you should be good to go.