jquery - 如何让 Jquery 对象在滚动到它时开始反弹？

Question

我有一个只有 1 页的网站。

页面宽度为 17289 像素。

它被分成单独的页面，每页宽度为 1920px。所以只有水平滚动在第 8 页我有一个图像。我只在用户滚动到此页面时才使图像反弹一次。如果用户离开此页面，它将停止弹跳。

这是我现在的代码：

$(window).scroll(function (event) { 
    if($(window).scrollLeft() > 1920*6 && $(window).scrollLeft() < 1920*7) {
        $("#astronaut").effect("bounce", { distance:400 }, 1600);
    }
});

现在发生的情况是，当用户滚动到页面时，图像会一直弹跳并且永远不会停止。

有人可以帮忙吗？

谢谢你。

Answer 1

你可以让它反弹n次数吗？只需将times属性添加到反弹效果中即可定义元素反弹的次数。将其设置为您喜欢的任何整数。在此示例中，我已将其设置为 10 次：

$(window).scroll(function (event) { 
    if($(window).scrollLeft() > 1920*6 && $(window).scrollLeft() < 1920*7) {
        $("#astronaut").effect("bounce", { distance:400, times:10 }, 1600);
    }
});

一旦元素反弹n次数，它将停止。