Rollover Fade In Throwing Errors

Question

My goal is to create a rollover text display gadget. When the user hovers over the picture, the picture fades (opacity is turned down) then a text appears. When the user hovers out of the picture, it toggles back to normal (pciture has opacity=1, text is gone).

I tested my early version of this and when hovering the picture, I did not see any text appear. I ran through the debugger and got the following error:

Uncaught TypeError: Object [object Object] has no method 'display' 

I have duplicated my small project in a JSFiddle . If anybody could help my text appear and remove the error, it would be appreciated. Thanks!

Answer 1

Two things:

1. jQuery doesn't have a function called display
2. In your fiddle, the .hovertext span is not a child of .pic , so $('.hovertext', $(this)) , where $(this) is one of the images, won't select anything.

Answer 2

I think you could use CSS3 transitions to get a similar effect: http://jsfiddle.net/derekstory/bzf6L/1/

img {
    position: absolute;
    opacity:1;
    -webkit-transition: all .8s ease;
    -moz-transition: all .8s ease;
    -ms-transition: all .8s ease;
    -o-transition: all .8s ease;
    transition: all .8s ease;
}
img:hover {
    opacity : .2;
}
span {
    font-family:Arial, Verdana, sans-serif;
}
.hovertext {
    position: aboslute;
    text-align:center;
}

Answer 3

You should use .fadeTo() instead of .slideToggle() It will toggle itself because of the onhover state:

JavaScript

$('.pic').hover(function() {
    $(this).fadeTo(9);
    //here is the place for the function to show the text.
});