[FIXED] How to stop animation after one body click with jQuery

Issue

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?

Solution

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().

Answered By - adeneo

Answer Checked By - Candace Johnson (PHPFixing Volunteer)