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 независимо друг от друга, используя класс li, связанный с каждым div, с помощью функции mouseenter, но я новичок в 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() 
}); 

EDIT

Может быть, это даже лучше использовать атрибут данных вместо имени класса:

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

Так вот, я предполагал, что имена классов ЛИСА непосредственно связаны идентификаторы див, которые вы хотите скрыть/показать.

Таким образом, первая функция (mouseover) получает имя класса li, которое вы заманили, затем добавляет его в префикс div#display_, чтобы создать идентификатор div, который вы хотите показать, а затем исчезает в этом элемент.

Функция mouseout просто скрывает все div. stop() останавливает анимацию, если ее часть проходит через затухание.

Надеюсь, это поможет.

Answer 3

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

Это самый простой вариант, предполагающий содержание находится в том же порядке, без необходимости вернуться к вашему сценарию и редактированию.