0

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

这是我的代码：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>

你们中有人知道解决方案吗？

提前致谢！

4

3 回答 3

3

你可以这样做：

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

}

小提琴

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

见.one()

于 2013-06-27T02:46:21.423 回答
2

查看 jQuery stop()方法。

在调用animate函数之前，调用stop. 使用参数true，true会导致#menu的所有运行动画跳到最后。如果您有意运行多个动画，那么您应该检查如何使用 queue 参数。

$('#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.
    });
})
于 2013-06-27T02:46:30.197 回答
0

您需要运行检查以查看元素是否位于 click 函数的动画中间：

$('#menutab').click(function() {
    if( !$('#menu').is(':animated') ) {
        $('#menu').animate({
            top: '+=203',
        }, 1000, function() {
        // Animation complete.
        });
    }
})
于 2013-06-27T02:43:01.657 回答