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 中。

回电还在运行ning吗？我可以停止寻找活动吗？

我应该使用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();
    });
});

Example fiddle

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

更新

要在单击其他任何地方时隐藏菜单，您需要将事件处理程序附加到 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();
        });
    }
});

Updated fiddle

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

jQuery, animate and animate back. Call back function error? :S

javascript

jquery

events

animation

callback