後如何一體點擊停止動畫使用jQuery

Question

所以，我有一些動畫動作，這是我的登錄面板框：

$('.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"); 
}); 

現在我需要點擊體內後添加一些隱藏的動作，所以我做到這一點：

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

爲停止躲在身體點擊這個元素，這對於身體外單擊由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"); 
     } 
    } 
}); 

一切都很好，但這個面板動畫後，每個機構點擊，如何停止並執行一次？取決於這個面板是否可見或不？

Answer 1

你通常通過，檢查是否發生點擊裏面的元素或不通過不使用鼠標移動事件來設置全局做這樣的事情：

$(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"); 
     } 
    } 
}); 

而且live()已過時，你應該使用on()。