Question

I would like to add a class which renders an element a particular color and then fade out that color back to the original. I thought the following would work (btn-warning changes the element to the color I want)

$('.myclass').addClass('btn-warning');
$('.myclass .btn-warning').fadeOut();

What am I doing wrong?

Answer 1

.fadeOut() fades out the entire element. It doesn’t gradually remove a class. For that, use .animate(). If it’s a color (not a numeric property) that you want to animate, you’ll need some jQuery UI as well.

$('.myclass')
    .addClass('btn-warning')
    .animate({color: '#000000'}, 600);