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

试试这个，将悬停功能中的$(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（即第一个和第二个图像，但不是第三个图像）为所有图像设置动画....

Answer 2

你的意思是这样吗？

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

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

2 个答案: