jQuery - 幫助結合多個mouseenter/mouseleave事件

Question

對不起，如果這是一個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，通過將dl類鏈接到由mouseenter函數關聯的li類來獨立地進行隱藏/顯示，但我是jQuery的新手，似乎無法找到解決方案。我知道必須有更乾淨的方式來做到這一點，但我還沒有找到。任何幫助將不勝感激！

example

感謝

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() 
    }); 

這是最簡單的版本，假設內容是在相同的順序，而不需要回到您的腳本和編輯。