Jquery: fire mouseout event even after I used click event to hide div

Question

jQuery("#na").mouseover(function()
{
    jQuery("#na").animate({width:"325px", height:"203px", left:"-40px", top:"-25px"}, 200)
});

jQuery("#na").mouseout(function()
{
    jQuery("#na").stop()
    jQuery("#na").animate({width:"244px",height:"152px", left:0, top:0}, 200)
});

jQuery("#na").click(function()
{
    jQuery("#na").hide()
    jQuery("#back").show()
});

so this is my code, the problem is when the click event fires, everything is fine, na disappears, but the moment you move the mouse, it appears again. I decided that the problem is that the mouseout event is fired, but for life, I cannot figure out how to fix it. any ideas?

Answer 1

Inside the mouseout method, check if "na" is visible or hidden. If it is hidden, do not do anything, otherwise you can make an animation.

EDIT:

Try using the mouseout method as follows:

jQuery("#na").mouseout(function(){
    if(jQuery("#na").is(":visible")){
       jQuery("#na").stop()
       jQuery("#na").animate({width:"244px",height:"152px", left:0, top:0}, 200)
    }
});

Answer 2

jQuery("#na").click(function(e)
{   
    e.stopPropagation();
    jQuery("#na").hide()
    jQuery("#back").show()
});

, . mous ent, , !