jquery - 使用 jQuery 悬停的不透明图像

Question

有什么想法为什么这不起作用吗？

我希望侧边栏中的图像在悬停时变得不透明。

//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>

谢谢

Answer 1

正如 John Boker 所指出的，hover() 有两个函数。

此外，您的动画调用中还有一个额外的逗号。我有预感会影响IE。

这个:

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

应该是:

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

编辑:添加了完整的ready()实现。

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