动画不会显示隐藏的块

Question

我正在尝试制作自己的 wow.js 版本，原因有两个，第一个是 wow.js 似乎不再维护，第二个是因为它只显示一次动画

我遇到的问题是我的代码在向下滚动时不显示动画，只有在向上滚动时才显示动画，我可以找到原因......

谁能帮我找出错误？

负责显示元素的函数是这样的：

function showBlocks() {
    $('.wow2').each(function () {
        var elementTop = $(this).data('wow2-top');

        $(this).html(elementTop);

        // Shows Elements
        if ((elementTop >= top) && (elementTop <= bottom)) {
            $(this).css('visibility', 'visible');
            $(this).addClass('animated').addClass($(this).data('wow2-class'));
        }
        /*
         // Hides Elements
         if ((elementTop < top) || (elementTop >= bottom)) {
         $(this).css('visibility', 'hidden');
         $(this).removeClass('animated').removeClass($(this).data('wow2-class'));
         }
         */
    });

}

这是我的jsfiddle：

Answer 1

滚动时，您正在更新 top 的值，但不会更新 bottom 的值。试试

$(window).scroll(function () {
    top = $(window).scrollTop();
    bottom = top + viewportHeight;
    showBlocks();
    writePosition();
});

https://jsfiddle.net/5q7gryqr/4/