Search code examples
jqueryhtml-tablehoverjquery-animatefade

Table with jQuery hover fade effect

Trying to get this code below to work in order to highlight the full row and not just one cell.

JSFiddle

JS:

$(document).ready(function(){
    $('td[id*="dataRow"]').stop().animate({"opacity": "0.2"}, "slow");

    $('td[id*="dataRow"]').hover(
    function() {
       $(this).stop().animate({"opacity": "1"}, "slow");
    },
    function() {
       $(this).stop().animate({"opacity": "0.2"}, "slow");
    });
});

Any assistance would be great!

Solution

  • You should target .parent().

    $(document).ready(function(){
    $('td[id*="dataRow"]').parent().stop().animate({"opacity": "0.2"}, "slow");

    $('td[id*="dataRow"]').hover(
    function() {
       $(this).parent().stop().animate({"opacity": "1"}, "slow");
    },
    function() {
       $(this).parent().stop().animate({"opacity": "0.2"}, "slow");
    });
});

    Fiddle: http://jsfiddle.net/poxpsdza/4/