1

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

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

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

4

1 回答 1

3

您通常会通过检查单击是否发生在元素内部来执行此类操作，而不是通过使用 mousemove 事件来设置 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");
        }
    }
});

并且live()已弃用，您应该使用 on().

于 2013-01-21T10:07:33.870 回答