CODEWITHSUNDEEP
jqueryjquery-uihtml-table
Gerico
Gerico

Reputation: 5169

Jquery fade background / animate background colour on table row

After much google searching and looking through other posts here i still can't work out if this is yet possible. I want to basically have a set background colour on my table rows that fades to another color quickly on :hover - Is this possible with Jquery?

I'm using multiple tables which will have, or would like to have, different colors for background hover, at the moment I'm using just CSS to do an hover event but obviously i want to try add a subtle but nice effect as they are nice chunky table rows.

****EDIT****

I found a solution: I am using Jquery UI -

$('tr').mouseover(function() {
    $('td', this).stop(true, true).animate
        ({ backgroundColor: "red" }, 1000);
});

$('tr').mouseout(function() {
    $('td', this).stop(true, true).animate
        ({ backgroundColor: "#666" }, 1000);
});

Upvotes: 4

Views: 5781

Answers (4)

Gerico
Gerico

Reputation: 5169

I found a solution: I am using Jquery UI -

$('tr').mouseover(function() {
    $('td', this).stop(true, true).animate
        ({ backgroundColor: "red" }, 1000);
});

$('tr').mouseout(function() {
    $('td', this).stop(true, true).animate
        ({ backgroundColor: "#666" }, 1000);
});

Upvotes: 1

arttronics
arttronics

Reputation: 9955

Since you would like to have different colors for background hover event for your table cells, this jsFiddle shows you how to use the background color property to change the colors of each cell on mouse hover via a Pseudo Color Map of NTSC Colors.

There's no jQuery or other library required since this pure CSS solution keeps up with the users mouse position quickly.

I think using animated fade in the example I provided would make too many cells linger with transitions causing confusion. That said, it's still easy to add in jQuery animate effects if needed, but depends on your table layout scheme.

Here's a revised jsFiddle using jQuery.

Upvotes: 1

Bob
Bob

Reputation: 1497

This is the code that i used in one of my project. 

     $('#table1 td, #table2 td').hover(function(){
        $(this).parents('tr').addClass('active').animate({opacity: 0.65,}, 500);
        $(this).parents('tr').addClass('active').animate(
             {opacity: 0.65,}, 500, function() {
           //Animation complete.
           $(this).animate({opacity: 1,}, 'slow');
     });
        $(this).mouseleave(function(){
            $(this).parents('tr').removeClass('active');
        });
    });

And in your css, you should have something like:

#table1 .active { background: #CCC;}
#table2 .active { background: #F2F2F2;}

Upvotes: 0

JackingLiu
JackingLiu

Reputation: 82

You can use jQuery UI's Color Animate effect.

Upvotes: 1

Related Questions