jQuery - 帮助组合多个 mouseenter/mouseleave 事件

Question

抱歉，如果这是一个菜鸟问题，但是有没有办法结合这些 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();
     });

我尝试过不同程序员的不同方法。我试图通过将鼠标悬停在由 mouseenter 函数链接到每个 div 的 li 类上来独立隐藏/显示多个 div，但我是 jQuery 新手，似乎找不到解决方案。我知道必须有一种更干净的方法来做到这一点，只是我还没有找到。任何帮助将不胜感激！

示例

谢谢

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>   

Answer 1

 $('.home, .about, .contact, ,services').hover(function(){
    $('#display_'+$(this).attr('class')+':hidden').fadeIn(400); 
 }, function() {
     $('#display_'+$(this).attr('class')).hide()
 }); 

编辑

也许使用数据属性而不是类名更好：

  <ul>
    <li class="home" data-name="home"><img src="images/gallery/thumb/home.png" width="82" height="23" /></li>
    <li class="about" data-name="about"><img src="images/gallery/thumb/about us.png" width="130" height="24" /></li>
    <li class="contact" data-name="contact"><img src="images/gallery/thumb/Contact Us.png" width="150" height="23" /></li>
    <li class="services" data-name="services"><img src="images/gallery/thumb/Services.png" width="113" height="24" /></li>
  </ul>

 $('#thumb li').hover(function(){
    $('#display_'+$(this).data('name')+':hidden').fadeIn(400); 
 }, function() {
     $('#display_'+$(this).data('name')).stop().hide();
 }); 

这样您可以更改类或添加类而不破坏它。

Answer 2

$('div#thumb li').hover(function(){ // mouseover
    var className = $(this).attr('class');
    var divToShow = $('div#display_'+className);
    divToShow.fadeIn(400);
},
function(){ // mouseout
    // just hide all divs
    $('div#right_nav div').stop().hide();
});

所以在这里，我假设 lis 的类名直接与您想要隐藏/显示的 div 的 id 相关。

因此，第一个函数（mouseover）获取您鼠标悬停的 li 的类名，然后将其添加到前缀 div#display_ 中，以构建您想要显示的 div 的 id，然后淡入该元素。

mouseout 函数只是隐藏所有的 div。如果动画已进入淡入状态，则 stop() 会停止动画。

希望这会有所帮助。

Answer 3

$('#thumb ul li').mouseenter(function(){
        $('#right_nav div').eq($(this).index()).fadeIn(400); 
     }).mouseleave(function(){
         $('#right_nav div').hide()
     }); 

这是最简单的版本，假设内容按相同顺序排列，无需返回脚本并进行编辑。