jQuery simplifying code (beginner)

Question

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...?

Answer 1

Add a class to the various items that you want to hover on, for example hoverItem. Then you can use $('.hoverItem').hoverIntent(function() ...); to set multiple items at once. Given the fat that the example you gave has two different opacities defined, I would create two classes.

Answer 2

You can create a named function (e. g. function myHover() {}) and then in your .hoverIntent reference it as .hoverIntent(myHover). Also, consider using the Multiple Selector when you want two IDs to have the same attached function.