如何改进jQuery下拉菜单动画

How to improve jQuery drop down menu animation

本文关键字：动画 下拉菜单 jQuery 何改进      更新时间：2023-09-26

我使用slideUp和slideDown函数创建了一个简单的jQuery下拉菜单。如果用户慢慢地将鼠标悬停在每一个上面，让前一个完成，它就会起作用，但这在现实中是永远不会发生的。

我该如何改进代码，使每个下拉菜单都能顺利过渡?

这是我的困境的一个工作小提琴:jsfiddle，这是代码:

<div id="header">
  <a id="item1" class="item" href="">Item 1</a>
  <a id="item2" class="item"  href="">Item 2</a>
</div>
<div id="box1">box1</div>
<div id="box2">box2</div>
CSS

#header{
    width:100%;
    height:50px;
    background:blue;
    text-align:right;
}
.item{
    color:#fff;
    width:50px;
    height:50px;
    display:inline-block;
    background:gray;
}
#box1{
    width:200px;
    height:100px;
    background:gray;
    display:none;
    float:right;
}
#box2{
    width:200px;
    height:100px;
    background:gray;
    display:none;
    float:right;
}
jQuery

$('#item1').hover(function(){
   $('#box1').stop().slideDown();
}, function(){
   $('#box1').stop().slideUp();
});
$('#item2').hover(function(){
   $('#box2').stop().slideDown();
}, function(){
   $('#box2').stop().slideUp();
});

指定幻灯片效果的速度。
可能的值:

    <
  1. 毫秒/gh>
  2. 快速

关键是使用promise()等待直到动画结束。

你可以查看它是如何工作的:http://jsfiddle.net/mcXBB/4/

我也改变了你的事件更灵活的方式，让你更容易地处理更多的菜单位置:

<div id="header">
    <a id="item1" class="item" rel="#box1" href="">Item 1</a>
    <a id="item2" class="item" rel="#box2" href="">Item 2</a>
</div>
<div id="box1" class="boxes" >box1</div>
<div id="box2" class="boxes" >box2</div>
$('#header a')
.mouseenter( function() {
    var boxId = $(this).attr('rel');
    $('.boxes').promise().done( function() {
        $(boxId).slideDown();
    });
})
.mouseleave(function() {
    var boxId = $(this).attr('rel');
    $('.boxes').promise().done( function() {
        $(boxId).slideUp();
    });
});

检查这个很棒的方法，让你悬停只适用于过滤，而不是在动画中，这将解决你的问题，我想。

 $('#box1').filter(':not(:animated)').slideUp();
相关文章：