Opaque image hovering with jQuery

Question

Hey,

Any ideas why this isnt working?

I want the images in the sidebar to go opaque when hovered.

//Opaque image hover
        $('#sidebar ul li img').hover(function() {
            $(this).animate({opacity: 0.8}, 500);
        }, function() {
            $(this).animate({opacity: 1}, 500);
        });

<div id="sidebar"><!--Sidebar start-->
        <ul>
            <li><img src="images/darkroom.png" alt="Darkroom software" class="png"/></li>
            <li><a href="#"><img src="images/download.png" alt="Download" /></a></li>
            <li><a href="#"><img src="images/features.png" alt="Features"/></a></li>
            <li><a href="#"><img src="images/prices.png" alt="Prices"/></a></li>
            <li><a href="#"><img src="images/support.png" alt="support"/></a></li>
        </ul>
</div>

Thank you

Answer 1

Hover usually takes two parameters, first is mouseenter, second is mouseleave, try:

$('#sidebar ul li img').hover(function() {
    $(this).animate({opacity: 0.8}, 500);
}, function() {
    $(this).animate({opacity: 0.2}, 500);
});

this assumes that original opacity was .2, you set it to what you want.

Answer 2

As John Boker noted, hover() takes two functions.

Also, you have an extra comma in your animate call. I have a feeling that will affect IE.

This:

$(this).animate({opacity: 0.8,}, 500);

Should be:

$(this).animate({opacity: 0.8}, 500);

EDIT: added full ready() implementation.

$(document).ready(function() {
    $('#sidebar ul li img').hover(function() {
        $(this).animate({opacity: 0.8}, 500);
    }, function() {
        $(this).animate({opacity: 1}, 500);
    });
});