horizontal-scrolling - Waypoints - 触发此元素的功能，而不是其他具有相同类名的元素

Question

每次上课时，我都会尝试播放动画。我正在使用 Waypoints，网站是水平滚动的。我的代码淡出班级照片。我希望它在每张照片出现时触发。目前，当第一张照片在视野中时，它会触发所有照片淡出。

不知道怎么写，所以一次只发生一个。

var waypoint = new Waypoint({
    element: document.getElementsByClassName('photo'),
    handler: function(direction) {
        $(this.element).animate({"opacity":"0"}, 100);
    },
    context: document.getElementsByClassName('horizontal_scroll'),
    horizontal: true,
    offset: '50%'
});

标签： horizontal-scrollingjquery-waypoints

Answer 1

在尝试了几次不同的迭代之后，我得到了它：

$(".photo_wide").waypoint(function(e) {
    $(this.element).animate({"opacity":"0"}, 100);
    }, {
    context: document.getElementsByClassName('horizontal_scroll'),
    horizontal: true,
    offset: "50%"
});