jquery – 动画不会显示隐藏的块

2023年8月5日 197次阅读

我正在尝试制作我自己的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：

最佳答案 在滚动时,您将更新顶部的值,而不是底部的值.尝试

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

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

点赞