Hover, DIV fades in but not out

Question

$(document).ready(function(){
    $(".thumbnail").hover(
        function(){
            $(".overthumb").fadeTo(1000,1).show();
        },
        function(){
            $(".overthumb").fadeTo(1000,0).hide();
        }
    );
});

http://jsfiddle.net/AndyMP/qCa7a/2/

The code above makes a DIV fade in, but for some reason won't fade out.

Maybe FadeOut isn't the best way of doing this?

Answer 1

Don't call hide .

http://jsfiddle.net/qCa7a/3/

Answer 2

As Daniel has said, you don't need to call hide() , however you also don't need to call show() .

A side note - you're using the function fadeTo() which is mainly used to fade an element to a specific opacity value (ie 4%). Seeing as you're just fading the element from 0% - 100% and vice versa, you can use these functions respectively: fadeIn() & fadeOut() .

Here's an example of using the above functions:

    // Bind the event to the required element
    $('#elementid').hover(
        function(){

            // Call the function on a specific element to fade in
            $('.overthumb').fadeIn(1000);

        },
        function(){

            // Call the opposite function on the same element to fade out
            $(".overthumb").fadeOut(1000);
        }
    );

Here are the link to the jQueryAPI document for the following functions: fadeIn() & fadeOut()