I'm getting to grips with jQuery but find myself repeating code over and over again...
Surely there's a simpler way to write this:
$('#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 also like to set the delay for hoverIntent but I don't think this is possible with the way I've written the code currently...?
