javascript - 如何将鼠标悬停在图像上但更改表格中的多个图像

Question

我有一个包含 50 张 (10x5) 图像的表格，所有图像都已褪色，当我将鼠标悬停在图像上时，它会变亮以脱颖而出。我正在努力解决的问题是将鼠标悬停在一张图片上，并且表格中的多张图片也很突出。 (我要突出的相关图片在表格中是随机的)。

我目前的脚本是这样的；

<script type="text/javascript">
        $(function() {
            $('.imgOpa').each(function() {
                $(this).hover(
                    function() {
                        $(this).stop().animate({ opacity: 1.0 }, 800);
                    },
                   function() {
                       $(this).stop().animate({ opacity: 0.5 }, 800);
                   })
                });
        });
</script>

如果我能得到任何建议，那就太好了，即使它告诉我这是不可能的!

Answer 1

试试这个，将 hover 函数中的 $(this) 更改为一个类......然后所有具有相同类的图像都将被动画化

$('.imgOpa').each(function () {
    $(this).hover( function () {
        $('.class').stop().animate({opacity: 1.0}, 800);
    }, function () {
        $('.class').stop().animate({opacity: 0.5}, 800);
    })
});

或者为了更好地为关联的图像设置动画，请使用 data

<img src="blah.jpg" class="imgOpa someclass" data-assoc="someclass"/>
<img src="blah.jpg" class="imgOpa someclass"/>
<img src="blah.jpg" class="imgOpa someotherclass"/>

然后

$('.imgOpa').each(function () {
    $(this).hover( function () {
        $('.' + $(this).data('assoc')).stop().animate({opacity: 1.0}, 800);
    }, function () {
        $('.' + $(this).data('assoc')).stop().animate({opacity: 0.5}, 800);
    })
});

当图像悬停时，这将为所有具有 someclass 类的图像(即第一张和第二张图像，但不是第三张)设置动画......