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

Question

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

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

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

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

ссылка на сайт разработчика: 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 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 2

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

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

Answer 3

Используйте целевые события, чтобы суммировать все только в одной функции наведения для всех div. Вот возможный фрагмент:

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

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

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);