0

私は自分の画像にこのコードを持っているので、ホバリングしていないときに不透明度を下げることができます。

$(document).ready(function () {
    $("img").css("opacity", 0.8);
    $("img").hover(function () {
        $(this).animate({
            opacity: 1.0
        }, 500);
    }, function () {
        $(this).animate({
            opacity: 0.8
        }, 500);
    });
});

ただし、この無限スクロールコードも使用しています

<script type="text/javascript" src="http://codysherman.com/tools/infinite-scrolling/code"></script>

そして一緒に、ページが最初に読み込まれたときに定義されたように、最初の写真だけが不透明になります。下にスクロールして新しい画像が無限スクロール スクリプトで読み込まれると、不透明度はそれらに影響しません。

これを無限スクロール スクリプトと連携させるにはどうすればよいですか?

4

2 に答える 2

1

代わりに jQuery イベント委任を使用しますhover。

$(document).ready(function () {
    $("body").on('mouseenter', 'img', function () {
        $(this).animate({
            opacity: 1.0
        }, 500);
    }).on('mouseleave', 'img', function () {
        $(this).animate({
            opacity: 0.8
        }, 500);
    });
});

画像の不透明度は JavaScript で設定するのではなく、真の CSS ルールとして設定する必要があります。

于 2012-06-21T01:52:13.253 に答える
0

イベントを動的に生成された要素にバインドする必要があります。

$("body").on('hover', 'img', function () {
    $(this).animate({
        opacity: 1.0
    }, 500);
}, function () {
    $(this).animate({
        opacity: 0.8
    }, 500);
});

すべてのタグbodyを含む要素に置き換えます。<img />

于 2012-06-21T01:51:53.237 に答える