很抱歉,如果这是一个noob问题,但有没有办法结合这些mouseenter / mouseleave事件?
$('.home').mouseenter(function(){
$('#display_home:hidden').fadeIn(400);
}).mouseleave(function(){
$('#display_home').hide()
});
$('.about').mouseenter(function(){
$('#display_about:hidden').fadeIn(400);
}).mouseleave(function(){
$('#display_about').hide();
});
$('.contact').mouseenter(function(){
$('#display_contact:hidden').fadeIn(400);
}).mouseleave(function(){
$('#display_contact').hide();
});
$('.services').mouseenter(function(){
$('#display_services:hidden').fadeIn(400);
}).mouseleave(function(){
$('#display_services').hide();
});
我试图隐藏/显示多个div,方法是将 mouseenter
函数链接到每个div的li类,但我似乎找不到解决方案 . 我知道必须有一个更清洁的方法,我还没有找到一个 . 任何帮助将不胜感激!
谢谢
HTML:
<div id="right_nav">
<div id='display_home'><img src="images/gallery/home.png" width="605" height="300" /></div>
<div id='display_about'><img src="images/gallery/about us.png" width="605" height="300" /></div>
<div id='display_contact'><img src="images/gallery/Contact Us.png" width="605" height="300" /></div>
<div id='display_services'><img src="images/gallery/Services.png" width="605" height="300" /></div>
</div>
<div id="thumb">
<ul>
<li class="home"><img src="images/gallery/thumb/home.png" width="82" height="23" /></li>
<li class="about"><img src="images/gallery/thumb/about us.png" width="130" height="24" /></li>
<li class="contact"><img src="images/gallery/thumb/Contact Us.png" width="150" height="23" /></li>
<li class="services"><img src="images/gallery/thumb/Services.png" width="113" height="24" /></li>
</ul>
</div>
3 回答
编辑
也许使用data属性而不是classname更好:
这样,您可以更改类或添加类而不会破坏它 .
所以在这里,我假设lis的类名直接关联你想要隐藏/显示的div的id .
因此,第一个函数(mouseover)会获取您已经删除的li的类名,然后将其添加到前缀
div#display_
,以便构建要显示的div的id,然后淡入该元素 .mouseout函数只隐藏所有div .
stop()
停止动画,如果它的部分通过淡入 .希望这可以帮助 .
这是最简单的版本,假设内容的顺序相同,无需返回脚本并进行编辑 .