jQuery: how can I control a div's opacity when hovering over another div?

Question

Hello everyone.

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.

Thank you very much for reading,

Kindest regards, Jannis

Answer 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:

$('#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:

$('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:

$('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:

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

Or this:

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

We are telling jQuery "only give me the <a> (or <div>) elements inside #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.

Answer 2

i use it :

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

EDIT AND FORGOT :

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

`