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

I am currently working on my portfolio website which uses a very simple navigation. However what I want to do is have the drop shadow beneath the type become stronger (read: higher opacity/ darker) when the type is being hovered on.

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

Right now my code looks as follows and does not generate any errors but simply does not do anything either.

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

For a good understanding of what I mean please have a look at 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);  
    });  
});

Basically I need the opacity of the shadow elements (4 individual ones) to start at 10% opacity and while the user hovers, the type moves down (this part is working) and simultaneously the shadow becomes stronger, increases to 60% opacity. Then revert back to 10% when on mouseOut.

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

2 个解决方案

#1

This line is wrong - it is passing a bunch of arguments to the $() function.

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

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

As the documentation notes, jQuery doesn't expect N arguments as a selector, but 1:

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

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

It is common (and good) practice to give a set of objects that should do something a common class or to select them in a smarter than just listing all their IDs. Based on your current HTML, this selector gets all the shadow <div>s in the menu, and is much shorter - you won't have to modify your code if you add a new menu element later on, for example:

通常(和良好)的做法是给出一组对象,这些对象应该做一个共同的类或者更聪明地选择它们,而不仅仅列出它们的所有ID。根据您当前的HTML,此选择器获取菜单中的所有shadow

,并且更短 - 如果稍后添加新的菜单元素,则不必修改代码,例如:

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

I also see you have this:

我也看到你有这个:

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

This is really, really, wrong. IDs should be unique in the document. By having more than 1 ID in the document not only are you breaking best practices, ID selection on jQuery will go crazy and won't work as expected. Like the fadeTo selector, you can change the shadow changing code to a cleaner:

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

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

I tested the website with these changes and it works fine.

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

What the selectors in my examples are doing is taking advantage of jQuery's context. By doing this:

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

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

Or this:

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

We are telling jQuery "only give me the <a> (or <div>) elements inside #navigationFrame.

我们告诉jQuery“只给我#navigationFrame中的(或

)元素。

It is equivalent to this:

它相当于:

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

It is a good idea to take advantage of this. I see you have a tendency to manually list the elements you're trying to do stuff to do even if they are all similar in some way. Try to shake this habit and let jQuery's powerful selectors get what you want from the document.

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

#2

I use this:

我用这个:

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

and style:

.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;
}

#1