Geek asks and answers

JQuery fade background / animate background color in table row

After doing a lot of Google searches and looking at other posts here, I still can't figure out if this is still possible. I want to basically set the background color on my table rows, which quickly fades to a different color: hover - is this possible with jQuery?

I am using several tables that will have or will have different colors for background hovering, at the moment I am only using CSS to create a hover event, but obviously I want to try adding a subtle but nice effect as they are nice sharp rows of lines .

**** 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);
});
+3
source share
4 answers

, jsFiddle , color, Pseudo Color Map NTSC.

jQuery , , CSS .

, fade , . , - jQuery, , .

jsFiddle jQuery.

+1

jQuery UI .

+1

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);
});
+1
source

This is the code that I used in one of my projects.

     $('#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 yours cssyou should get something like:

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

More articles:


All Articles