js代码
1 $(function () { 2 $("#nav-li1").hover(function () { 3 $("#nav-yc1").slideToggle(); 4 $("#nav-li1").css({backgroundColor:'white'}); 5 $("#nav-li1 a").eq(0).css({color:'yellow'}); 6 },function () { 7 $("#nav-li1").css({backgroundColor:'#EEA236'}); 8 $("#nav-li1 a").eq(0).css({color:'white'}); 9 $("#nav-yc1").hide(); 10 }); 11 });
body
<ul class="nav3-menu flout-menu">
<li id="nav-li1">
<a href="#">Twice</a>
<div id="nav-yc1" class="nav-yc" style="z-index: 2">
<a href="#" style="font-size: 12px">THE STORY BEGINS</a>
<a href="#" style="font-size: 12px;">PAGE TWO</a>
<a href="#" style="font-size: 12px;">TWICETAGRAM</a>
</div>
</li>
</ul>
问题描述:
鼠标触碰#nav-li1后弹出#nav-yc1,并且#nav-li1中的内容颜色发生改变。
请问有什么方法可以使鼠标离开时#nav-li1里内容自动还原到之前的颜色,
不用我这样又在代码上把本来的颜色再敲一遍吗?
还有就是鼠标在上面快速滑动好几次,当鼠标立即滑出后,hover()和slideToggle()依旧在执行,它执行的次数会等于鼠标滑动的次数,有什么办法能让鼠标滑出后立即停止没执行完的效果呢?
finish() 方法停止当前运行的动画,移除所有排队的动画,并为被选元素完成所有动画。
该方法与 .stop(true,true) 方法类似,不同的是,finish() 也会引起所有排队动画的 CSS 属性停止。
语法
样式通过css的hover改变,若需要改变较多不同的模块,可通过添加移除class来实现样式改变。
在移入和移除时,只要控制元素的显示与隐藏即可。
jQuery().finish()