我可能有一个简单的问题:/代码: http : //jsfiddle.net/FZufj/8//
我有一个褪色菜单的简单代码。
我希望在鼠标悬停在菜单和“菜单按钮”上后菜单淡出这并不难,但我不知道如何在鼠标从菜单移动到菜单按钮时禁用淡入淡出效果
我希望在鼠标从菜单中移动后菜单淡出。
希望你能理解我在 jQuery 中是真正的菜鸟。
谢谢
我可能有一个简单的问题:/代码: http : //jsfiddle.net/FZufj/8//
我有一个褪色菜单的简单代码。
我希望在鼠标悬停在菜单和“菜单按钮”上后菜单淡出这并不难,但我不知道如何在鼠标从菜单移动到菜单按钮时禁用淡入淡出效果
我希望在鼠标从菜单中移动后菜单淡出。
希望你能理解我在 jQuery 中是真正的菜鸟。
谢谢
您应该使用 .stop(true,false) 来停止当前动画。
这是代码的工作版本。(通过使用 1 个选择器同时选择 .menu 和 .button 删除了双重代码
$(document).ready(function() { // This sets the opacity of the thumbs to fade down to 60% when the page loads
$(".menu").fadeTo(600, 0.01);
$(".menu, .button").hover(function() {
$(".menu").stop(true,false).fadeTo("slow", 1.0); // This sets the opacity to 100% on hover
}, function() {
$(".menu").stop(true,false).fadeTo("slow", 0.01); // This sets the opacity back to 60% on mouseout
});
});
我还在这里更新了您的示例:http: //jsfiddle.net/FZufj/19/
演示:http: //jsfiddle.net/wdm954/FZufj/20/
我认为你的做法是错误的。如果您将菜单按钮和菜单选项分组到同一个元素中,则悬停将适用于两者。这里是使用一个span
按钮和一个嵌套ul
的下拉菜单。
<div class="topbar">
<ul class="menu">
<li>
<span>Option 1</span>
<ul class="sub">
<li>Sub Menu 1</li>
<li>Sub Menu 2</li>
<li>Sub Menu 3</li>
</ul>
</li>
</ul>
</div>
悬停应用于包装列表项,并由子元素继承。
$('.menu > li').hover(function() {
$(this).children('.sub').fadeIn();
}, function() {
$(this).children('.sub').fadeOut();
});