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 回答