Animating Fade Of Twitter Bootstrap Buttons

I came across a curious issue today. You can’t select a period of time over which to fade out and fade in Twitter Bootstrap buttons.

If you apply jQuery fadeTo() or animate() they fade out and they fade in, but they do it in their own time.

This may be related to a css transition which is applied in the bootstrap css, I haven’t had a chance to look, but the workaround for me is to put the button in a span and fade the span in and out instead.

   <span><a href="#" class="btn small">Button Text</a></span>

2 comments.

  1. what is the jquery code for fading the span in and out that you used in the above example?

  2. I used the basic $(‘span’).fadeOut(); and $(‘span’).fadeIn(); but obviously with a more specific selector.