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

身体

<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附加的处理程序只执行一次然后被删除。动画完成后，相应的处理程序将附加到animate函数的完整回调中。

参见 .one()

Answer 2

查看jQuery stop()方法。

在致电animate功能之前，请致电stop。使用参数true，true将导致所有#mente的运行动画跳转到最后。如果您有故意运行多个动画，那么您应该查看如何使用队列参数。

$('#menutab').click(function() {
    $('#menu').stop(true, true).animate({
        top: '0px',
    }, 1000, function() {
    // Animation complete.
    });
})
$('#menucontentwrapper').mouseleave(function() {
    $('#menu').stop(true, true).animate({
        top: '-203px',
    }, 500, function() {
// Animation complete.
    });
})

Answer 3

您需要运行检查以查看元素是否位于点击功能的动画中间位置：

$('#menutab').click(function() {
    if( !$('#menu').is(':animated') ) {
        $('#menu').animate({
            top: '+=203',
        }, 1000, function() {
        // Animation complete.
        });
    }
})

滑动菜单工作正常，但双动画

3 个答案: