2

(10x5) に 50 枚の画像を含むテーブルがあり、すべて色あせており、画像にカーソルを合わせると明るくなり、目立ちます。私が苦労しているのは、画像の上にカーソルを置いて、テーブル内の複数の画像も目立たせることです。(目立たせたい関連画像は、表内でランダムに表示されています)。

これまでのスクリプトは次のとおりです。

<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(つまり、1 番目と 2 番目の画像ですが、3 番目の画像はアニメーションしません) ....

于 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 に答える