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

您可以使用$(this)作为悬停功能中的选择器，而不是使用$("img.a, img.c")。

有关基本示例，请参阅this fiddle。

Answer 2

问题在于你的语法。

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 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页面的脚本标签中使用此功能有以下部分：

See Example on my blog...

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

4 个答案: