jQuery — помощь в объединении нескольких событий mouseenter/mouseleave

Извините, если это нубский вопрос, но есть ли способ объединить эти события 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 и не могу найти решение. Я знаю, что должен быть более чистый способ сделать это, я просто еще не нашел его. Любая помощь будет принята с благодарностью!

пример

Спасибо

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>

jquery mouseenter mouseleave
person dcd0181    schedule 24.06.2011    source источник

Ответы (3)


arrow_upward
3
arrow_downward 

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

Таким образом, вы можете изменить классы или добавить классы, не нарушая его.

person PeeHaa    schedule 24.06.2011
comment
Я бы изменил $('.home, .about, .contact, ,services').hover(function(){ на $('li', $("#thumb").hover(function(){, чтобы не имело значения, когда меняются имена или когда добавляются новые пункты меню. - person Björn; 24.06.2011
comment
Спасибо. Я пошел с вашим вторым примером, и он работал без проблем. - person dcd0181; 24.06.2011

arrow_upward
1
arrow_downward 

$('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, которые вы хотите скрыть/показать.

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

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

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

person Thomas Clayson    schedule 24.06.2011

arrow_upward
1
arrow_downward 

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

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

person Treemonkey    schedule 24.06.2011
comment
Это предполагает, что элементы div в #right_nav расположены в том же порядке, что и lis, что может быть не всегда. Если классы напрямую соотносятся с идентификаторами div, то это может быть лучшим способом сделать это, как в моем примере. - person Thomas Clayson; 24.06.2011
comment
пример показывает их в этом порядке, так что это кажется уместным: P - person Treemonkey; 24.06.2011
comment
справедливо, я просто подумал, что хочу подчеркнуть, чтобы не было путаницы. :) - person Thomas Clayson; 24.06.2011