更改悬停时 2 个项目的不透明度

Question

我的页面上有 2 张图片。当我将鼠标悬停在 img.a 上时，它会将不透明度更改为 0 并且工作正常。不过，当将鼠标悬停在 img.a 上时，我希望 img.c 也将不透明度更改为 0。我的代码适用于 img.a，但不适用于 img.c

<script type='text/javascript'>
$(document).ready(function(){
$("img.a").hover(
function() {
$(this).stop().animate({"opacity": "0"}, "slow");
},
function() {
$(this).stop().animate({"opacity": "1"}, "slow");
},
function() {
$("img.c").stop().animate({"opacity": "0"}, "slow");
},
function() {
$("img.c").stop().animate({"opacity": "1"}, "slow");
});

});
</script>

Answer 1

问题在于你的语法。

jQuery的hover()函数只有两个参数——两个函数。第一个是当鼠标悬停在元素上时调用的函数，另一个是当鼠标移出元素时调用的函数。

你已经快完成了，现在你需要做的就是将 4 个函数合并为两个函数，它就可以工作了：

<script type='text/javascript'>
$(document).ready(function(){

  $("img.a").hover(

    function() { // this function is called on mouseover img.a
        $(this).stop().animate({"opacity": "0"}, "slow");
        $("img.c").stop().animate({"opacity": "0"}, "slow");
    },
    function() { // this function is called on mouseout img.a
        $(this).stop().animate({"opacity": "1"}, "slow");
        $("img.c").stop().animate({"opacity": "1"}, "slow");
    }

  });

});
</script>

Answer 2

您可以使用

$(this)

作为悬停功能中的选择器，而不是使用

$("img.a, img.c")

。

请参阅 this fiddle 了解基本示例。

Answer 3

将所有应该褪色的图像赋予同一类。 然后给所有应该一起褪色的图像相同的

data-group

。

<img class="fade" data-group="a" />
<img class="fade" data-group="b" />
<img class="fade" data-group="a" />

<script type="text/javascript">
$(function(){ /* shorthand for $(document).ready(function(){ */

    $('img.fade').hover(function(){

        $('img.fade[data-group="'+$(this).data('group')+'"]').stop().animate({"opacity": "0"},"slow");

    },function(){

        $('img.fade[data-group="'+$(this).data('group')+'"]').stop().animate({"opacity": "1"},"slow");

    });    

});
</script>

现在，当您将鼠标悬停在其中一张图像上时，同一组中的所有图像都会淡出。

这是我在 jsFiddle 上的示例：http://jsfiddle.net/Rv9jU/

Answer 4

$(function () {
    $("#image1").css("opacity", 0.3);
    $("#image1").hover(function () {
        $(this).animate({ opacity: 1.0 }, 500);
    }, function () {
        $(this).animate({ opacity: 0.3 }, 500);
    });
})

在 html 页面头部的 script 标签内使用此函数。