javascript - Stop jQuery animation when mouse enters div -
i have div box changes heights , hides text. in jquery have :
$("#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.
Comments
Post a Comment