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 bee 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 bees stronger, increases to 60% opacity. Then revert back to 10% when on mouseOut.

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 bee 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 bees stronger, increases to 60% opacity. Then revert back to 10% when on mouseOut.

• javascript
• jquery
• html
• css
• css-selectors

2 Answers 2

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 mon (and good) practice to give a set of objects that should do something a mon 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.

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