javascript - Stop jQuery animation when mouse enters div -

i have div box changes heights , hides text. in jquery have :

fiddle

$("#nav_bar").mousedown(function() {     var mousepos;     $(this).animate({height: "3.750em"}, 500, "swing");     $("#home, #videos, #about_us, #unknown").show();     $(this).mouseleave(function() {         mousepos = 1;         $(this).delay(1000).animate({height: "1em"}, 500, "swing");         $("#home, #videos, #about_us, #unknown").delay(1000).hide(250);         $(this, "#home, #videos, #about_us, #unknown").mouseenter(function({             mousepos = 0;         });         if(mousepos == 1) {             $("#nav_bar").animate({height: "1em"}, 500, "swing");             $("#home, #videos, #about_us, #unknown").hide(250);         } else if (mousepos == 0) {             $("#nav_bar").stop(true, true);             $("#home, #videos, #about_us, #unknown").stop(true, true);         }     }); }); 

the problem animation won't stop when variable updates , re-enters box. want div animation stop when mouse re-enter div.

it won't stop because out-most function still runs. try this:

function showbars(){  $(this).animate({height: "3.750em"}, 500, "swing");     $("#home, #videos, #about_us, #unknown").show(); }  function hidebars(){  $("#nav_bar").animate({height: "1em"}, 500, "swing");             $("#home, #videos, #about_us, #unknown").hide(250); }  function animatebox(){  $(this).delay(1000).animate({height: "1em"}, 500, "swing");         $("#home, #videos, #about_us, #unknown").delay(1000).hide(250); }  function leavebox(){   $("#nav_bar").stop(true, true);             $("#home, #videos, #about_us, #unknown").stop(true, true); }  $("#nav_bar").hover(showbars,hidebars); $("#home, #videos, #about_us, #unknown").hover(animatebox,leavebox); 

pardon me, if syntactical errors.