如何才能做得更好？

Question

当鼠标悬停在任何导航链接或正文副本中的 div 上时，我尝试定位导航的背景和正文副本中的其他 4 个 div。

1. 当鼠标悬停在正文复制中的四个 div 中的任何一个上时，其他三个 div 应该淡出，并且导航 div 背景颜色也应该改变

我可以使用它，但我是 javascript/jquery 的新手，我知道有更好的方法来做到这一点。

那会是什么？

开发网站的链接是 http://www.alienfactory.com/vision1/

每次我看到它都有点有趣，看起来我正在尝试像 CSS 一样编写 javascript

这是一个代码片段，它针对各种鼠标悬停目标重复 3 次以上

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

为了进一步说明，这里是完整的脚本。我知道有更好的方法，但是怎么办？

$('#services, #navservices').hover(
    功能 （） {
        $('#vision, #approach, #team').stop().fadeTo('slow', .2);       
        $('#navigation').stop().animate({ backgroundColor: "#8ac2b7" }, 500);       
    },
    功能 （） {
        $('#vision, #approach, #team').stop().fadeTo('slow', 1);
    $('#navigation').stop().animate({ backgroundColor: "#404040" }, 500);
    }
    ）；
$('#vision, #navvision').hover(
    功能 （） {
        $('#services, #approach, #team').stop().fadeTo('slow', .2);
        $('#navigation').stop().animate({ backgroundColor: "#9e97ca" }, 500);
    },
    功能 （） {
        $('#services, #approach, #team').stop().fadeTo('slow', 1);
        $('#navigation').stop().animate({ backgroundColor: "#404040" }, 500);   
        }
    ）；
$('#approach, #navapproach').hover(
    功能 （） {
        $('#services, #vision, #team').stop().fadeTo('slow', .2);
        $('#navigation').stop().animate({ backgroundColor: "#e5b120" }, 500);
        },
    功能 （） {
        $('#services, #vision, #team').stop().fadeTo('slow', 1);
    $('#navigation').stop().animate({ backgroundColor: "#404040" }, 500);
    }
    ）；
$('#team, #navteam').hover(
    功能 （） {
        $('#services, #vision, #approach').stop().fadeTo('slow', .2);
    $('#navigation').stop().animate({ backgroundColor: "#cf1858" }, 500);
    },
    功能 （） {
        $('#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

使用目标事件将所有 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 3

啊，我明白你的意思了。 这个怎么样：

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

类添加到您想要将鼠标悬停在其上的区域。