Question

我目前正在使用我的投资组合网站，该网站使用非常简单的导航。然而，我想要做的是当类型被悬停时，类型下方的阴影变得更强（读取：更高的不透明度/更暗）。

现在我的代码看起来如下，并且不会产生任何错误，但也不会做任何事情。

为了更好地理解我的意思，请查看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％。

Answer 1

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

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

正如documentation注释，jQuery不希望N个参数作为选择器，但是1：

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

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

$('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的context。通过这样做：

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

或者这个：

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

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

相当于：

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

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

Answer 2

我用这个：

$(".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;
}

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

2 个答案: