jQuery，动画和动画回。 回调函数错误？ ：S

Question

我不知道我做了什么。 这个想法是为一个元素设置动画，使其从某个位置滑入并在单击另一个元素时向后滑动。 我已经在原始事件函数的回调中应用了第二个事件。

但是，尽管有这种结构，但第二个事件函数仍会运行，尽管我没有单击回调函数中的第二个元素。

如果您不关注，则基本思路是这样。

单击->滑入->外部单击->滑出

$('#mobileList').click(function(){
    $('#mobileMenu').css({'display':'block'}).animate({
        'left':'30%'
    },500,function(){
        $('#body').click(function(){
            $('#mobileMenu').animate({
                'left':'100%'
            },500,function(){$('#mobileMenu').css({'display':"none"});/* I tried return false; here, failed to solve problem*/});
        });
    });         
});

启动CSS

nav#mobileMenu{display:none;width:70%;height:100%;background:#191820;color:#DCDCDC;position:fixed;top:0;left:100%;}

元素的结构。

<div id="body">
    <a id="mobileList>&#9776;</a>
    <!-- content here -->
</div>
<nav id="mobileMenu">
    <!-- content -->
</nav>

在前两次尝试中，它工作正常。 下次我跑步时，它将进行动画处理，然后立即进行动画处理。 我真的不明白为什么是回调函数？ ：S

我认为这是因为元素#mobileList位于元素#body 。

回电是否仍在进行？ 我可以停止寻找活动吗？

我是否应该使用queue()将幻灯片滑入和滑出？

Answer 1

您在这里不需要回调，只需单独将click处理程序挂接起来即可：

$('#mobileList').click(function(){
    $('#mobileMenu').show().stop(true).animate({
        'left': '30%'
    }, 500);         
});

$('#body').click(function(){
    $('#mobileMenu').stop(true).animate({
        'left': '100%'
    }, 500, function() {
        $(this).hide();
    });
});

小提琴的例子

请注意，我使用了show / hide而不是css并添加了对stop()调用，以防止在动画过程中连续单击时队列被填满。

---

UPDATE

要在单击其他任何位置时隐藏菜单，需要将事件处理程序附加到document并检查e.target以查看导致事件的元素。 如果它不在菜单中，则将其隐藏。

$('#mobileList').click(function (e) {
    e.stopPropagation();
    $('#mobileMenu').show().stop(true).animate({ 'left': '30%' }, 500);
});

$(document).click(function (e) {
    var $menu = $('#mobileMenu');
    if (!$menu.is(e.target) && !$menu.has(e.target).length) {
        $('#mobileMenu').stop(true).animate({ 'left': '100%' }, 500, function () {
            $(this).hide();
        });
    }
});

更新的小提琴