Question

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

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

如果你不跟随，基本的想法就是这个。

点击 - ＆gt; slidein - ＆gt;外部点击 - ＆gt;滑出

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

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

1 个答案:

jQuery，动画和动画回来。回电功能错误？ ：S

1 个答案:

jQuery，动画和动画回来。回电功能错误？：S