CODEWITHSUNDEEP
javascriptjquerycssopacity
Sam Creamer
Sam Creamer

Reputation: 5361

jQuery not fading on hover

I have a table and every time someone hovers over a cell I want it to become less opaque (opacity is default 0.85). Here is my code:

$(document).ready(function(){

    $("td").hover(function(){

        $(this).fadeTo(700,1);

            },function(){

        $(this).fadeTo(500,0.85);

    }); 
});

EDIT: It seems like the problem may be that nothing is firing when I hover, even when I add alert('hi') to the function, nothing happens

EDIT 2: If anyone still reads this question, I believe the reason it wasn't working when I asked this question is because I was creating the td elements asynchronously and they weren't there when the page as loaded. I believe I ended up using .on() instead of .hover(). Also, fading to 1.0 opacity was the desired effect (it started at 0.85 or 0.5 I forget). Thanks everyone

Upvotes: 2

Views: 142

Answers (6)

Smeegs
Smeegs

Reputation: 9224

http://jsfiddle.net/D96PA/4/

Not sure why you set the second function to 0.85 instead of 0.5. I changed it to 0.5. Let me know if that's what you were looking for.

$(document).ready(function(){

        $("td").hover(function(){

            $(this).fadeTo(700,1);

                },function(){

            $(this).fadeTo(500,0.5);

        }); 
    });

Upvotes: 0

Vikram
Vikram

Reputation: 3351

you can use css transtions also 

td:hover {
        opacity: 1;
        -webkit-transition: opacity .7s ease-in-out;
        -moz-transition: opacity .7s ease-in-out;
        -ms-transition: opacity .7s ease-in-out;
        -o-transition: opacity .7s ease-in-out;
        transition: opacity .7s ease-in-out;
    }
td{
opacity:.85;
}

Upvotes: 0

jerrylow
jerrylow

Reputation: 2629

You may have to predefine the opacity for the table cell prior to having the hover work.

table tr td {
    background: grey;
    opacity: 0.5;
    -webkit-opacity: 0.5;
}

The rest is just using your jQuery code.

Jsfiddle: http://jsfiddle.net/vdHDD/1/

Upvotes: 0

Shade
Shade

Reputation: 785

The opacity you are fading to, 1.0, is fully opaque, not transparent.

Try having it fade to 0.5

Upvotes: 0

Sean Kendle
Sean Kendle

Reputation: 3609

Easy, you have your functions backwards:

(You were fading up to 1 on mouseover, and fading down to .85 on mouseout)

$(document).ready(function(){

    $("td").hover(function(){

        $(this).fadeTo(500,0.85);

    },function(){

        $(this).fadeTo(700,1);

    }); 
});

Here's a fiddle: http://jsfiddle.net/bZ3gX/

Upvotes: 1

Naftali
Naftali

Reputation: 146300

Just use CSS

td {
    opacity: .85;    
    transition: opacity .25s ease-in-out;
    -moz-transition: opacity .25s ease-in-out;
    -webkit-transition: opacity .25s ease-in-out;
}
td:hover {
    opacity: .5;    
}

Demo: http://jsfiddle.net/maniator/bnrWK/

Upvotes: 8

Related Questions