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

我'd也想设置hoverIntent的延迟，但我认为这是不可能的，因为我目前编写代码的方式...？

Answer 1

向您想要悬停的各种项目添加一个课程，例如hoverItem。然后，您可以使用$('.hoverItem').hoverIntent(function() ...);一次设置多个项目。鉴于你给出的例子有两种不同的不透明度，我会创建两个类。

Answer 2

您可以创建一个已命名的函数（例如函数myHover（）{}），然后在您的.hoverIntent引用中将其作为.hoverIntent(myHover)。另外，如果您希望两个ID具有相同的附加功能，请考虑使用Multiple Selector。