0

slideUp我使用andslideDown函数创建了一个简单的 jQuery 下拉菜单。如果用户将缓慢地悬停在每个允许前一个完成但实际上永远不会发生的情况下，它会起作用。

我将如何改进代码，以便每个下拉菜单都能平滑过渡？

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

HTML

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

3 回答 3

0

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

  1. 毫秒
  2. 减缓
  3. 快速地
于 2013-04-30T10:33:18.343 回答
0

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

 $('#box1').filter(':not(:animated)').slideUp();
于 2013-04-30T10:38:06.853 回答
0

关键是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();
    });
});
于 2013-04-30T10:59:57.603 回答