javascript - 如何在使用 jQuery 单击一个主体后停止动画

Question

所以，我有一些动画 Action ，这是我的登录面板框:

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

现在我需要在点击正文后添加一些隐藏 Action ，所以我这样做:

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

一切都很好，但是这个面板在每次点击 body 后都会动画化，如何停止它并只执行一次？取决于这个面板是否可见？

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