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 fading when the mouse. This code does not work:

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

How can i do this? Thanks in advance.

Answer 1

You need to pass two parameters to hover. (Handler A mouseenterand handler mouseleave)

For instance:

$(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)
        }
    );
});

Answer 2

The variable fadeyou define is only in scope in the event handler. In addition, hover()two event handlers are needed for : one for mouse input, and the other when it ends.

$(document).ready(function() {
  $("#main ul li").hover(function() {
    $(this).addClass("active").find("img.g-img").stop().fadeTo("slow", 0.5);
  }, function() {
    $(this).removeclass("active").find("img.g-img").stop().fadeTo("slow", 1);
  });
});