javascript - 滑动菜单工作正常但有双重动画

Question

我刚刚在 Jquery 的帮助下成功制作了一个从顶部滑入的菜单。当我按下“菜单”选项卡时，它会进入/向下，当我离开菜单时，它会滑回。 问题是，当我快速按下菜单选项卡 2 次时，它会降低两倍的像素。 此外，当我离开菜单时它会上升，但是当我在动画仍在发生时返回并再次离开时，它也会上升两倍的像素。

这是我的代码: CSS

#menu {
    position:absolute;
    left:0px;
    top:-203px;
    width: 100%;
    z-index:1;
}
#menucontentwrapper {
    background-color: #330066;
    width: 100%;
    height: 200px;
    border-left: 3px solid #000000;
    border-right: 3px solid #000000;
    border-bottom: 3px solid #000000;
}
#menucontent {
    height: 200px;
    width: 820px;
    margin: 0 auto;
}
#menutabwrapper {
    width: 820px;
    height: 50px;
    margin: 0 auto;
}
#menutab {
    background-color: #330066;
    height: 30px;
    width: 100px;
    float: right;
    border-bottom-left-radius: 10px;
    -webkit-border-bottom-left-radius: 10px;
    -moz-border-radius-bottomleft: 10px;
    border-bottom-right-radius: 10px;
    -webkit-border-bottom-right-radius: 10px;
    -moz-border-radius-bottomright: 10px;
    border-left: 3px solid #000000;
    border-right: 3px solid #000000;
    border-bottom: 3px solid #000000;
    text-align: center;
    vertical-align: middle;
    line-height: 30px;
    font-weight: bold;
    font-size: 20px;
    color: #FFFFFF;
}

body

<div id="menu">
    <div id="menucontentwrapper">
        <div id="menucontent"></div>
    </div>
    <div id="menutabwrapper">
        <div id="menutab">MENU</div>
    </div>
</div>
<script>
$('#menutab').click(function() {
$('#menu').animate({
top: '+=203',
}, 1000, function() {
// Animation complete.
});
})
$('#menucontentwrapper').mouseleave(function() {
    $('#menu').animate({
        top: '-=203',
    }, 500, function() {
// Animation complete.
    });
})
</script>

你们知道解决这个问题的方法吗？

提前致谢!

Answer 1

你可以这样做:

var $menutab = $('#menutab');
var $menu = $('#menu');
$menutab.one('click', slideDown);//Initially register one click event to slideDown

function slideDown()
{
     $menu.animate({
        top: '+=203',
    }, 1000, function () {
        $('#menucontentwrapper').one('mouseleave', slideUp);// On completion of animation register one mouseleave event to slideUp
    });

}
function slideUp()
{
    $menu.animate({
        top: '-=203',
    }, 1000, function () {
        $menutab.one('click', slideDown);// On completion of animation register one click event to slideDown
    });

}

Fiddle

该方法之所以有效，是因为通过使用 one 而不是 on 来附加事件处理程序，它使得在动画运行时不会处理任何事件。这是因为 one 附加的处理程序只执行一次，然后被删除。动画完成后，相应的处理程序将附加到动画函数的完整回调中。

参见 .one()