Reputation:
I would like to change (animated) the color of the table row if the mouse is over it. Could you help me to do this? Thanks.
td{width:200px;text-align:center; background-color:gray;}
$('tr').mouseover(function() {
$(this).animate
({ backgroundColor: "red" }, 1000);
});
$('tr').mouseout(function() {
$(this).animate
({ backgroundColor: "gray" }, 1000);
});
Upvotes: 3
Views: 7194
Reputation: 53466
You have two problems:
You're animating the color of tr
, but this is over-ridden by your td
styling.
Change to
$('tr').mouseover(function() {
$(this).find('td').animate
({ backgroundColor: "red" }, 1000);
});
Will get the mouseover
working.
For some reason jQuery isn't liking gray
in the mouseout
function. Not sure why that is, but it will work if you change to for example
$('tr').mouseout(function() {
$(this).find('td').animate
({ backgroundColor: "#aaa" }, 1000);
});
I also prefer using the hover
solution a couple of the other suggested, but they didn't address these issues
Upvotes: 0
Reputation: 239470
$('tr').mouseover(function() {
$('td', this).stop(true, true).animate
({ backgroundColor: "red" }, 1000);
});
$('tr').mouseout(function() {
$('td', this).stop(true, true).animate
({ backgroundColor: "#666" }, 1000);
});
Table rows don't respond to background color, so you change the background of the td
s inside, instead. And for some reason it doesn't like "gray" at all. Thought that was actually a valid CSS color name, but apparently not. I used "#666" instead and it worked fine. I also introduced stop(true, true)
. That will stop any in progress animation on the element, so the current one can go ahead. It leads to a smoother look and response.
Upvotes: 4
Reputation: 31043
$("table tr ").hover(
function(){
$(this).animate
({ backgroundColor: "Red" }, 1000);
},
function(){
$(this).stop(true,true).animate
({ backgroundColor: "White" }, 1000);
}
);
use .stop(true,true)
to prevent the animation from occurring if the mouse is hovered frequently
Upvotes: 1
Reputation: 3410
Try using hover instead of mouseover and mouseout:
$('tr').hover(function() {
$(this).animate({ "background-color" : "red" }, 1000);
},
function () {
$(this).animate({ "background-color" : "gray" }, 1000);
});
Upvotes: 0
Reputation: 6127
$('tr td').mouseover(function(){
$(this).css('background-color','#f00');
}).mouseout(function(){
$(this).css('background-color','#444');
});
Upvotes: 0