Stop fadeTo() in jquery

Question

I used

$(document).ready(function() {

$("#main ul li").hover(function(){

var fade = $('img.g-img', this);
fade.fadeTo('slow', 0.5);


$("#main ul li").removeClass("active");
$(this).toggleClass("active");

});


}); 

I want to stop fade, when mouseout. This code not working:

fade.stop().fadeTo('slow',1)

How can I do this? Thanks in advance.

Answer 1

You need to pass two parameters to hover. (A mouseenter handler and a mouseleave handler)

For example:

$(document).ready(function() {
    $("#main ul li").hover(
        function() { //mouseenter handler
            var fade = $('img.g-img', this);
            fade.fadeTo('slow', 0.5);

            $("#main ul li").removeClass("active");
            $(this).toggleClass("active");
        }, 
        function () {  //mouseleave handler
            var fade = $('img.g-img', this);
            fade.stop().fadeTo('slow',1)
        }
    );
});