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

悬停通常需要两个参数，第一个是mouseenter，第二个是mouseleave，尝试：

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

这假设原始不透明度为.2，您将其设置为您想要的值。

Answer 2

正如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);
    });
});

用jQuery盘旋的不透明图像

2 个答案: