How to stop animation after one body click with jQuery

Question

So, i have some animation actions, this is for my login panel box:

$('.top_menu_login_button').live('click', function(){
    $('#login_box').animate({"margin-top": "+=320px"}, "slow");
});
$('.login_pin').live('click', function(){
    $('#login_box').animate({"margin-top": "-=320px"}, "slow");
});

now i need to add some hiding action after click on body so i do this:

var mouse_is_inside = false;
$('#login_box').hover(function () {
   mouse_is_inside = true;
}, function () {
   mouse_is_inside = false;
});

for stop hiding this element on body click, and this for body click outside by login-box

$("body").mouseup(function () {
    if (!mouse_is_inside) {
        var login_box = $('#login_box');
        if (login_box.css('margin-top','0')){
            login_box.stop().animate({"margin-top": "-=320px"}, "slow");
        }
    }
});

Everything is fine but this panel animates after each body click, how to stop this and execute only one time? Depend on this panel is visible or not?

Answer 1

You'd normally do this sort of thing by checking if the click occured inside the element or not, not by using mousemove events to set globals :

$(document).on('click', function(e) {
    if ( !$(e.target).closest('#login_box').length ) { //not inside
        var login_box = $('#login_box');
        if ( parseInt(login_box.css('margin-top'),10) === 0){
            login_box.stop(true, true).animate({"margin-top": "-=320px"}, "slow");
        }
    }
});

And live() is deprecated, you should be using on().