Question

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

当鼠标悬停在身体副本中的四个div中的任何一个时，其他三个div应该淡出，导航div背景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

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

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 3

使用目标事件对所有div的一个悬停函数中的所有内容求和。这是一个可能的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类添加到要悬停的区域，这将在您链接到的页面上有效。

怎么可以做得更好？

4 个答案: