JQuery упростив код (начинающий)

Question

Я получаю в борьбу с JQuery, но найти себе повторять код снова и снова ...

Конечно, есть более простой способ, чтобы написать это:

$('#more-mcr, #more-hilton, #more-lpool').hide(); 


$('#mcr-hatters').hoverIntent(function() { 
    $('#mcr-hilton').stop().animate({opacity: 0.4}); 
    $('#more-mcr').fadeIn({duration:200}); 
}, function() { 
    $('#mcr-hilton').stop().animate({opacity: 1}); 
    $('#more-mcr').fadeOut({duration:200}); 
}); 

$('#mcr-hilton').hoverIntent(function() { 
    $('#mcr-hatters').stop().animate({opacity: 0.4}); 
    $('#more-hilton').fadeIn({duration:200}); 
}, function() { 
    $('#mcr-hatters').stop().animate({opacity: 1}); 
    $('#more-hilton').fadeOut({duration:200}); 
}); 

$('#lpool-hostel').hoverIntent(function() { 
    $('#more-lpool').fadeIn({duration:200}); 
}, function() { 
    $('#more-lpool').fadeOut({duration:200}); 
}); 

$('#offers-mcr').hoverIntent(function() { 
    $('#offers-lpool').stop().animate({opacity: 0.4}); 
    $('#offers-bham').stop().animate({opacity: 0.4}); 
}, function() { 
    $('#offers-lpool').stop().animate({opacity: 1}); 
    $('#offers-bham').stop().animate({opacity: 1}); 
}); 

$('#offers-lpool').hoverIntent(function() { 
    $('#offers-mcr').stop().animate({opacity: 0.4}); 
    $('#offers-bham').stop().animate({opacity: 0.4}); 
}, function() { 
    $('#offers-mcr').stop().animate({opacity: 1}); 
    $('#offers-bham').stop().animate({opacity: 1}); 
}); 

$('#offers-bham').hoverIntent(function() { 
    $('#offers-lpool').stop().animate({opacity: 0.4}); 
    $('#offers-mcr').stop().animate({opacity: 0.4}); 
}, function() { 
    $('#offers-lpool').stop().animate({opacity: 1}); 
    $('#offers-mcr').stop().animate({opacity: 1}); 
}); 

I 'd также хотел бы установить задержку для hoverIntent, но я не думаю, что это возможно с тем, как я написал код в настоящее время ...?

Answer 1

Добавить класс к различным элементам, которые вы хотите навести, например hoverItem. Затем вы можете использовать $('.hoverItem').hoverIntent(function() ...); для установки сразу нескольких элементов. Учитывая, что жир, который вы дали, имеет два разных непрозрачности, я бы создал два класса.

Answer 2

Вы можете создать именованную функцию (например, функцию myHover() {}), а затем в своем .hoverIntent ссылайтесь на нее как .hoverIntent(myHover). Кроме того, рассмотрите возможность использования Multiple Selector, если вы хотите, чтобы два идентификатора имели одну и ту же прикрепленную функцию.