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.

This could help: http://stackoverflow.com/questions/7302824/animating-addclass-removeclass-with-jquery — Andrea Parodi, Aug 28 '13 at 10:08

score 1 · Answer 1 · answered Aug 28 '13 at 10:16

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.

answered Aug 28 '13 at 10:16

robooneus

1,344
8
10

Thanks for this comment. This would be an really nice solution to the problem! Unfortunately i need a solution with ie7 in mind also. Sorry, for forgetting to mention this on the my original post – Mario Patrao Aug 28 '13 at 10:28

score 0 · Accepted Answer · answered Aug 28 '13 at 10:58

0

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!

answered Aug 28 '13 at 10:58

mMoovs

934
9
18

Thanks, This works fine. I still had some problems but i solved it. Something was not working right because of my css classes of the table it self, like the style row odd and even. Thank you again! – Mario Patrao Aug 28 '13 at 11:44

score 0 · Answer 3 · answered Aug 28 '13 at 11:29

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');
   });             
 });

score 0 · Answer 4 · answered Aug 28 '13 at 11:32

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

Remove css class with animation

4 Answers4