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

すべて問題ありませんが、このパネルはボディをクリックするたびにアニメーションします。これを停止して 1 回だけ実行するにはどうすればよいですか? このパネルが表示されるかどうかに依存しますか?

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 に答える