2

我有一张桌子，里面有 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>

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

4

2 回答 2

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（即第一张和第二张图像，但不是第三张）设置动画......

于 2012-05-15T16:03:11.187 回答
0

你的意思是这样吗？

<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>
于 2012-05-15T16:04:07.023 回答