我正在尝试调试以下脚本以确保最佳,所需的UX。正如这把小提琴上看到的那样,这个脚本没有像预期的那样工作。
$("ul.menu li").mouseover(function() {
$(this).find("ul.sub-menu").animate({"opacity": "show"}, 800, "swing");
$(this).hover(function() {}, function(){
$(this).find("ul.sub-menu").animate({"opacity": "hide"}, "slow");
});
});
如您所见,动画最初不会触发。此外,如果用户不小心将鼠标悬停在多个链接上,则不需要的动画会卡住播放几秒钟。我想编辑这种响应能力。在使用jQuery时,目前在专业UI设计中处理此问题的主要方法是什么,以及如何将这些解决方案实现到我的脚本中?
您正在嵌套mouseover()
并.hover()
这是主要问题。您只是想在将鼠标悬停在某个内容上时显示某些内容,然后在悬停时反转动画。
试试这个: http://jsfiddle.net/pF8wZ/4/
jQuery(document).ready(function($) {
$("ul.menu > li").hover(
function() {
$(this).find("ul.sub-menu").stop().animate({
height: 'toggle',
opacity: 'toggle'
});
}
);
});
我还从小提琴中清理了你的 CSS。您只需要这样做即可使悬停行为正常工作:
#access {
background: #000;
margin: 0 auto;
display: block;
float: left;
position: relative;
}
ul.menu {
list-style: none;
margin: 0;
}
ul.menu > li {
float: left;
padding: 5px;
background: #ccc;
}
#access ul .sub-menu {
position: absolute;
left: 0;
top: 100%;
margin: 0;
width: 200px;
background-color: #474747;
-moz-border-radius-bottomleft: 10px;
-webkit-border-bottom-left-radius: 10px;
-moz-border-radius-bottomright: 10px;
-webkit-border-bottom-right-radius: 10px;
display: none;
}
#access ul .sub-menu a {
background: #333;
line-height: 1em;
display: block;
padding: 3px 5px;
background-image: -moz-linear-gradient(100% 100% 90deg, #474747, #939393);
background-image: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#939393), to(#474747));
}
和 HTML:
<div id="access">
<div class="menu-header">
<ul id="menu-wordpress-sandbox-menu" class="menu">
<li id="menu-item-17" class="menu-item">
<a href="#">Fruits</a>
<ul class="sub-menu">
<li id="menu-item-19" class="menu-item"><a href="#">Oranges</a></li>
<li id="menu-item-20" class="menu-item"><a href="#">Apples</a></li>
</ul>
</li>
<li id="menu-item-32" class="menu-item">
<a href="#">Colors</a>
<ul class="sub-menu">
<li id="menu-item-30" class="menu-item"><a href="#">Blue</a></li>
<li id="menu-item-31" class="menu-item"><a href="#">Red</a></li>
</ul>
</li>
<li id="menu-item-33" class="menu-item">
<a href="#">Links</a>
<ul class="sub-menu">
<li id="menu-item-34" class="menu-item"><a href="#">Google</a></li>
<li id="menu-item-35" class="menu-item"><a href="#">Yahoo!</a></li>
</ul>
</li>
</ul>
</div>
</div>
尝试.stop().animate({...});
在开始新动画之前停止任何现有动画。
文档: http://api.jquery.com/stop/
我无法重现您的第一个问题。 但是,我对脚本进行了一些更新,希望能获得您想要的行为(至少更接近):
- 在动画之后使用
.stop
来停止它们,这样它们就不会因重复事件而排队 - 不要在回调中绑定
.hover
事件。 单独绑定 - 使用
.mouseenter
/.mouseleave
这样就不会通过移动具有相同父级的不同元素来触发事件。
http://jsfiddle.net/pF8wZ/2/