FadeIn застрял в JQuery

Question

Когда я использую этот код

$("#mainMenu .home").hover(
    function() { 
     $("#mainMenuHoverTitle").fadeIn("fast"); 
     $("#mainMenuHoverTitle").css("background-position", "440px 600px"); 
     $("#mainMenuHoverTitle").text("Naslovna"); 
    }, 
    function() { 
     $("#mainMenuHoverTitle").hide(); 
    } 
); 
$("#mainMenu .alarm").hover(
    function() { 
     $("#mainMenuHoverTitle").fadeIn("fast"); 
     $("#mainMenuHoverTitle").css("background-position", "440px 583px"); 
     $("#mainMenuHoverTitle").text("Alarm (9)"); 
    }, 
    function() { 
     $("#mainMenuHoverTitle").hide(); 
    } 
); 

и быстро перемещаться с помощью мыши через меню он застревает. Как это сделать правильно?

Answer 1

Перед любой анимацией вы должны добавить .stop(), чтобы отменить текущую анимацию.

$("#mainMenu .home").hover(
    function() { 
     $("#mainMenuHoverTitle").stop().fadeIn("fast"); 
     $("#mainMenuHoverTitle").css("background-position", "440px 600px"); 
     $("#mainMenuHoverTitle").text("Naslovna"); 
    }, 
    function() { 
     $("#mainMenuHoverTitle").stop().hide(); 
    } 
); 
$("#mainMenu .alarm").hover(
    function() { 
     $("#mainMenuHoverTitle").stop().fadeIn("fast"); 
     $("#mainMenuHoverTitle").css("background-position", "440px 583px"); 
     $("#mainMenuHoverTitle").text("Alarm (9)"); 
    }, 
    function() { 
     $("#mainMenuHoverTitle").stop().hide(); 
    } 
);