jQuery：如何在悬停在另一个div上时控制div的不透明度？

我目前正在使用一个非常简单的导航我的投资组合网站上工作。但是，我想要做的是在类型被悬停时，类型下的阴影变得更强（读取：较高的不透明度/较暗）。jQuery：如何在悬停在另一个div上时控制div的不透明度？

现在我的代码如下所示，不会产生任何错误，但根本不会做任何事情。

为了理解我的意思，请查看the website with a live example。

/* 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％。

来源

2009-06-10 Jannis

这条线是错误的 - 它将一串参数传递给$()函数。

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

随着documentation笔记，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在文档中应该是唯一的。通过在文档中拥有超过1个ID，不仅可以打破最佳实践，jQuery上的ID选择将变得疯狂并且不会按预期工作。像fadeTo选择，你可以在影子更改代码更改为更清洁：

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

我测试了这些变化的网站，它工作正常。

我的示例中的选择器在做什么是利用jQuery的context。通过这样做：

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

或者这样：

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

我们告诉jQuery的“只要你给我<a>（或<div>）元素中#navigationFrame

它等效于这样：

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

这是一个好主意利用这一点。我发现你倾向于手动列出你正在尝试做的事情，即使它们在某种程度上都是相似的。试着改变这种习惯，让jQuery的强大选择器从文档中获得你想要的。

来源

2009-06-10 04:37:32

这完美的作品，并感谢您特别适用于这样的细节解释它。我不敢相信我用过两次相同的身份证..啊..我应该知道的更好。感谢您指出了这一点！非常感谢。 J. – Jannis 2009-06-10 05:22:50

我用这个：

$(".thumbs img").addClass('unselected_img'); 
$('.thumbs img').click(function() { 
    $(this).addClass('selected_img'); 
    if ($(this).is('selected_img')) { 
     $(this).removeClass('selected_img'); 
    } else { 
     $('.thumbs img').removeClass('selected_img'); 
     $(this).addClass('selected_img'); 
    } 
}); 

// hover the lists 

$('.thumbs img').hover(
    function() { 
     $(this).addClass('selected_img_h'); 
    }, 
    function() { 
     $(this).removeClass('selected_img_h'); 
});`

和风格：

.selected_img 
{ 
    opacity: 1; filter: alpha(opacity = 100); 
    border:none; 
} 

.selected_img_h{ 
    opacity: 1; filter: alpha(opacity = 100); 
    border:none; 
} 

.unselected_img 
{ 
    opacity: 0.6; filter: alpha(opacity = 60); 
    border:none; 
}

来源

2009-06-10 04:38:33

jQuery：如何在悬停在另一个div上时控制div的不透明度？

回答

相关问题