Remove css class with animation

Question

I'm creating a table and i want to highlight a specific row.

I did this using:

$this.css('background-color', 'green');

$this.delay(3000).animate({ backgroundColor: $color }, 3000);

$this = the row in question.

$color = the previous row color.

But i want it to work with the a css class, so something like this

$this.addClass('highlight');

The class .highlight will only have a background-color .

The problems is that, after i add the class, i can't the background-color .

If i use:

$this.delay(3000).animate({ backgroundColor: $color }, 3000);

it doesn't seem to work because it doesn't overrides the background-color property of the class .highlight itself. And i don't see a way to animate a removeClass method or even a switchClass from .highlight to '' .

Is there any solution i'm not thinking off to do this.

Thanks in advance.

Answer 1

Use CSS transitions instead. Better performance and simpler.

Fiddle example

transition:background-color 0.3s linear;

though this doesn't provide as much browser support for the animation, obviously.

Answer 2

You could use jQuery UI's .switchClass which animates all the style changes: .switchClass

Once completed highlighting, use the callback to switch it back.

$('div').click(function() {
    $(this).switchClass( "normal", "color", 1000, "easeInOutQuad", function(){
        $(this).delay(3000).switchClass( "color", "normal", 1000, "easeInOutQuad" );
});

});

Fiddle me here!

Answer 3

the .animate() function works with "numeric" properties like: height, width, left, etc.. but not with background-color.

You can try this:

$(document).ready( function() {
$('tr.normal').on('click', function() {
   $(this)
   .hide()
   .delay(3000)
   .fadeIn('slow')
   .toggleClass('highlight');
   });             
 });

Answer 4

You could use jQuery's addClass and removeClass, consider:

if($(document).scrollTop() > 250)
{    
$('#div').addClass("show");
}
else
{
$('#div').removeClass("show");
}
});

What this is doing is replacing the original class, such as "hide" with the div class "show", this particular snippet of code displays a banner when the user scrolls 250px down the page.

Remember if you're using this code that it's still better (and smoother) to use CSS3 transitions UNLESS you're considering users who's browsers don't support this, such as IE8-.

EDIT: I just realized the reason you're doing it this way is because you're considering IE7 users. Perfect. I have literally just solved this issue myself.

The workaround I used was to have a css3 transition set up, and a detector with an if statement to use jQuery where transition isn't supported, see below:

var Detect = (function() {
            var
            //Add CSS properties to test for
                            props = "transition".split(","),
            //Browser prefixes
                            CSSprefix = "Webkit,Moz,O,ms,Khtml".split(","),
                            d = document.createElement("detect"),
                            test = [],
                            p, pty;
            // test prefixed code
            function TestPrefixes(prop) {
                            var
                                            Uprop = prop.charAt(0).toUpperCase() + prop.substr(1),
                                            All = (prop + ' ' + CSSprefix.join(Uprop + ' ') + Uprop).split(' ');
                            for (var n = 0, np = All.length; n < np; n++) {
                                            if (d.style[All[n]] === "") return true;
                            }
    return false;
            }
            for (p in props) {
                            pty = props[p];
                            test[pty] = TestPrefixes(pty);
            }
            return test;

            }());


if (Detect.transition) {
        $(function(){
$(window).scroll(function() {
//your code here
//remember to use an if else