Как это можно сделать лучше?

Question

Я пытаюсь настроить таргетинг на фон моей навигации и 4 других divs в копии тела, когда мышь над любыми навигационными ссылками или divs в копии тела.

1. при наведении на любой из четырех дивы в теле скопировать остальные три дивы должны исчезнуть и навигационные дивы Backgroun dcolor должны меняться, а

у меня есть это работает, но я новичок в javascript/jquery, и я знаю, что есть лучший способ сделать это.

Что бы это было?

ссылку на Dev сайт http://www.alienfactory.com/vision1/

Его любопытное смешно каждый раз, когда я смотрю на это, похоже, я пытаюсь написать JavaScript, как это CSS

здесь фрагмент кода, он повторяет более 3 времени различные наводящие мишень

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

для уточнения здесь полный сценарий. Я знаю, что есть лучший способ, но как?

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

А, я понимаю, что вы имеете в виду. Как об этом:

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

Вы можете кэшировать элементы:

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

Использование целевых событий просуммировать все только одна функция парения для всех дивы. Вот возможная 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

Глядя на ваш сайт Дев, я могу видеть, что вы хотите в верхней строке, чтобы быть такой же цвет, что и область, которую вы наведите курсор мыши на в нижней части. Это означает, что вы можете удалить свои жестко закодированные цвета и просто посмотреть цвет элемента, на который вы нависаете.

Чтобы сделать вещи проще, я бы посоветовал вам взять все ваши разделы внизу и дать им общий класс CSS. В этом примере я буду использовать 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); 
}); 

Это будет работать на странице вы связаны, при условии, что вы добавляете navSection класс областей, которые вы хотите, чтобы парить над.