jQuery:当我将鼠标悬停在另一个div上时,如何控制div的不透明度？

Question

我目前正在我的投资组合网站上工作,它使用非常简单的导航.然而,我想要做的是当类型被悬停时,类型下方的阴影变得更强(读取:更高的不透明度/更暗).

现在我的代码看起来如下,并没有产生任何错误,但也没有做任何事情.

为了更好地理解我的意思,请通过实例了解该网站.

/* Work | Play | About | Contact */
/* Shadow Opacity */
$(document).ready(function() {
    $('#workShadow', '#playShadow', '#aboutShadow', '#contactShadow').fadeTo( 0, 0.1);
});

/* Shadow Hover effect */
$(document).ready(function() {
    $('a#work').hover(function() {
        $('#workShadow').fadeTo( 200, 0.5);
    }, function() {
        $('#workShadow').fadeTo( 400, 0.1);
    });
});

/* Type movement on hovering */
$(document).ready(function() {  
    $('a.shift').hover(function() { //mouse in  
        $(this).animate({ paddingTop: 85, paddingBottom: 2 }, 200);  
    }, function() { //mouse out  
        $(this).stop().animate({ paddingTop: 75, paddingBottom: 12 }, 400);  
    });  
});

基本上我需要阴影元素的不透明度(4个单独的)以10%不透明度开始,当用户盘旋时,类型向下移动(此部分正在工作),同时阴影变强,增加到60%不透明度.然后在mouseOut上恢复为10%.

Answer 1

这一行是错误的 - 它将一堆参数传递给$()函数.

$('#workShadow', '#playShadow', '#aboutShadow', '#contactShadow').fadeTo( 0, 0.1);

正如文档所述,jQuery不希望N个参数作为选择器,但是1:

$('#workShadow, #playShadow, #aboutShadow, #contactShadow').fadeTo( 0, 0.1);

通常(和良好)的做法是提供一组对象,这些对象应该做一个共同的类或者更聪明地选择它们而不仅仅列出它们的所有ID.根据您当前的HTML,此选择器将获取<div>菜单中的所有阴影,并且更短 - 如果稍后添加新的菜单元素,则无需修改代码,例如:

$('div','#navigationFrame').fadeTo(0, 0.1);

我也看到你有这个:

<li id="work"><a id="work" ...>

这确实是非常错误的.ID在文档中应该是唯一的.通过在文档中使用多个ID,不仅打破了最佳实践,jQuery上的ID选择也会变得疯狂,并且无法按预期工作.与fadeTo选择器一样,您可以将阴影更改代码更改为更清晰:

$('a','#navigationFrame').hover(function() {
    $(this).next('div').fadeTo(200, 0.5);
}, function() {
    $(this).next('div').fadeTo(400, 0.1);
});

我用这些更改测试了网站,它运行正常.

我的示例中的选择器正在利用jQuery的上下文.通过做这个:

$('a','#navigationFrame');

或这个:

$('div','#navigationFrame');

我们告诉jQuery"只给我里面的<a>(或<div>)元素#navigationFrame.

它相当于:

$('#navigationFrame').find('a');

利用这个是个好主意.我看到你倾向于手动列出你试图做的事情要做的元素,即使它们在某种程度上都是相似的.试着摆脱这种习惯,让jQuery强大的选择器从文档中获得你想要的东西.