Opaque image hovering with jQuery
<p>Any ideas why this isnt working?</p>

<p>I want the images in the sidebar to go opaque when hovered.</p>

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

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

<p>Thank you</p>
