How could this be done better?

Question

I am trying to target the background of my navigation and 4 other divs in the body copy when mousing over any navigation links or the divs in the body copy.

1. when mousing over any one of the four divs in the body copy the other three divs should fade and the navigation divs backgroun dcolor should change as well

i have it working but i am new to javascript/jquery and i know there is a better way to do it.

What would that be?

link to dev site is http://www.alienfactory.com/vision1/

Its kinda funny everytime i look at it it looks like i am trying to write javascript like it is CSS

here is a code snippet it repeats 3 more time for the various mouseover targets

$('#services, #navservices').hover(
    function () {
        $('#vision, #approach, #team').stop().fadeTo('slow', .2);
        $('#navigation').stop().animate({ backgroundColor: "#8ac2b7" }, 500);
},
    function () {
    $('#vision, #approach, #team').stop().fadeTo('slow', 1);   
    $('#navigation').stop().animate({ backgroundColor: "#404040" }, 500);
    }
);

for further clarification here is the full script. I know there is a better way but how?

$('#services, #navservices').hover(
    function () {
        $('#vision, #approach, #team').stop().fadeTo('slow', .2);    
        $('#navigation').stop().animate({ backgroundColor: "#8ac2b7" }, 500);    
    },
    function () {
        $('#vision, #approach, #team').stop().fadeTo('slow', 1);
    $('#navigation').stop().animate({ backgroundColor: "#404040" }, 500);
    }
    );
$('#vision, #navvision').hover(
    function () {
        $('#services, #approach, #team').stop().fadeTo('slow', .2);
        $('#navigation').stop().animate({ backgroundColor: "#9e97ca" }, 500);
    },
    function () {
        $('#services, #approach, #team').stop().fadeTo('slow', 1);
        $('#navigation').stop().animate({ backgroundColor: "#404040" }, 500);   
        }
    );
$('#approach, #navapproach').hover(
    function () {
        $('#services, #vision, #team').stop().fadeTo('slow', .2);
        $('#navigation').stop().animate({ backgroundColor: "#e5b120" }, 500);
        },
    function () {
        $('#services, #vision, #team').stop().fadeTo('slow', 1);
    $('#navigation').stop().animate({ backgroundColor: "#404040" }, 500);
    }
    );
$('#team, #navteam').hover(
    function () {
        $('#services, #vision, #approach').stop().fadeTo('slow', .2);
    $('#navigation').stop().animate({ backgroundColor: "#cf1858" }, 500);
    },
    function () {
        $('#services, #vision, #approach').stop().fadeTo('slow', 1);
        $('#navigation').stop().animate({ backgroundColor: "#404040" }, 500);
    }
    );  

Answer 1

Ah, I see what you mean. How about this:

var eventOver = function() {
    $('#vision, #approach, #team').stop().fadeTo('slow', .2);       
    $('#navigation').stop().animate({ backgroundColor: $(this).data('fadeTo') }, 500);      
};
var eventOut = function() {
    $('#vision, #approach, #team').stop().fadeTo('slow', 1);
    $('#navigation').stop().animate({ backgroundColor: '#404040' }, 500);
}   
$('#services, #navservices').data('fadeTo', '#8ac2b7').hover(eventOver, eventOut);
$('#vision, #navvision').data('fadeTo', '#9e97ca').hover(eventOver, eventOut);
$('#approach, #navapproach').data('fadeTo', '#e5b120').hover(eventOver, eventOut);
$('#team, #navteam').data('fadeTo', '#cf1858').hover(eventOver, eventOut);

Answer 2

You could cache the elements:

var e1 = $('#vision, #approach, #team'),
    e2 = $('#navigation');
$('#services, #navservices').hover(
    function() {
        e1.stop().fadeTo('slow', .2);
        e2.stop().animate({ backgroundColor: "#8ac2b7" }, 500);
    },
    function() {
        e1.stop().fadeTo('slow', 1);
        e2.stop().animate({ backgroundColor: "#404040" }, 500);
    }
);

Answer 3

Use target events to sum everything in only one hover function for all divs. Here is a possible snipet:

$( document ).hover( function( ev){
    function () {
        var target = $( ev.target);
        var elements = {'div_1', 'div_2', 'div_3', 'div_4'}; // all divs
        elements[target.attr('id')] = null; // only the other ones
        $(target ).doSomething(); // with the main div
        $.each( elements , function(i, el){
            $(el).doSomethingElse(); // with other divs
        }); 
    },
    function () {
        // the same concept as above
    }
});

Answer 4

Looking at your dev site, I can see that you want the top bar to be the same color as the area you hover over at the bottom. This means you can remove your hardcoded colors and simply look up the color of the item you are hovering over.

To make things simpler, I'd advise that you take all of your sections at the bottom and give them a common CSS class. For this example I'll use navSection.

$('.navSection').hover(function() {
    var bgColor = $(this).css('background-color');
    $(this).siblings().stop().fadeTo('slow', .2);
    $('#navigation').stop().animate({ backgroundColor: bgColor }, 500);
}, function() {
    $(this).siblings().stop().fadeTo('slow', 1);
    $('#navigation').stop().animate({ backgroundColor: "#404040" }, 500);   
});

This will work on the page you linked to, provided that you add the navSection class to the areas you want to hover over.