Comment cela pourrait-il être mieux fait?

Question

J'essaie de cibler l'arrière-plan de ma navigation et 4 autres divs dans la copie du corps lorsque je souris sur les liens de navigation ou les divs dans la copie du corps.

1. lorsque souris est placée sur l'un des quatre divs dans le corps copier les trois autres divs se fane et les divs de navigation backgroun dcolor devraient changer aussi

je l'ai travailler mais je suis nouveau javascript/jquery et je sais qu'il y a une meilleure façon de le faire.

Qu'est-ce que ce serait?

lien vers le site dev est http://www.alienfactory.com/vision1/

Son à chaque fois un peu drôle que je la regarde, il semble que je suis en train d'écrire javascript comme il est CSS

ici est un extrait de code, il répète 3 plus de temps pour les différentes cibles de mouseover

 
$('#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); 
    } 
); 

Pour plus de précisions, voici le script complet. Je sais qu'il y a un meilleur moyen mais comment?

 
$('#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, je vois ce que vous voulez dire. Que diriez-vous ceci:

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

Vous pouvez mettre en cache les éléments:

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

Utiliser des événements cibles pour résumer tout en une seule fonction de vol stationnaire pour tous les divs. Voici un snipet possible:

$(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

En regardant votre site dev, je vois que vous voulez que la barre supérieure pour être la même couleur que la zone que vous survolez en bas. Cela signifie que vous pouvez supprimer vos couleurs codées en dur et simplement rechercher la couleur de l'objet que vous survolez.

Pour simplifier les choses, je vous conseille de prendre toutes vos sections en bas et de leur donner une classe CSS commune. Pour cet exemple, je vais utiliser 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); 
}); 

Cela fonctionne sur la page que vous avez lié à, à condition que vous ajoutez la classe navSection aux zones que vous souhaitez planer au-dessus.