Question

我的图片有这段代码，所以当不悬停在它们上面时，不透明度会降低。

$(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>

我一起只能在页面最初加载时定义的第一张照片变得不透明。向下滚动并使用无限滚动脚本加载新图像后，不透明度对它们没有影响。

如何让它与无限滚动脚本一起使用？

Answer 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规则。

Answer 2

您需要将事件绑定到动态生成的元素：

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

将body替换为包含所有<img />标记的元素。

Javascript不透明度悬停和无限滚动

2 个答案: