如何在使用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

您通常會通過檢查元素內是否發生單擊而不是通過使用mousemove事件來設置全局變量來執行此類操作：

$(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() 。