javascript - 为什么我的基于视口(viewport)的脚本不添加类

Question

我已经构建了一个应该将类添加到 div 的代码，但没有任何反应。也许你可以帮我解决问题。我实际上已经从 codePen 中复制了代码，并且在 codePen 上它可以工作，而在我的网站上则不能。也许是因为我使用的是 WordPress？我怎样才能告诉浏览器执行这段代码？

这是我处理过的文件的链接: https://michalkuczek.pl/afsgdtj/

它应该工作的方式:第二个 div 在出现在视口(viewport)中时应该淡入。

新代码:

jQ

<script>
function isScrolledIntoView(elem) {
    var docViewTop = jQuery(window).scrollTop();
    var docViewBottom = docViewTop + jQuery(window).height();

    var elemTop = jQuery(elem).offset().top;
    var elemBottom = elemTop + jQuery(elem).height();

    return ((elemBottom <= docViewBottom) && (elemTop >= docViewTop));
}

jQuery(window).scroll(function () {
    jQuery('.anim').each(function () {
        if (isScrolledIntoView(this) === true) {
            jQuery(this).addClass('anima').removeClass('viss')
        }
    });

});
</script>

CSS

.anima span{
    display: inline-block;
    transition: 3s;
    opacity: 0;
    animation-duration: 1s;
    animation-name: fInUpSmall;
    animation-fill-mode: forwards;
}
@keyframes fInUpSmall{
    0%{
        opacity:0;
        transform:translateY(15px)}
    100%{
        opacity:1;
        transform:translateY(0)}
}

.anima span:nth-child(1) {
    animation-delay: .1s;
}
.anima span:nth-child(2) {
    animation-delay: .25s;
}.anima span:nth-child(3) {
    animation-delay: .4s;
}.anima span:nth-child(4) {
    animation-delay: .55s;
}.anima span:nth-child(5) {
    animation-delay: .7s;
}.anima span:nth-child(6) {
    animation-delay: .85s;
}
.anima span:nth-child(7) {
    animation-delay: 1s;
}
.anima span:nth-child(8) {
    animation-delay: 1.15s;
}
.anima span:nth-child(9) {
    animation-delay: 1.3s;
}
.viss{
    visibility: hidden;
}

HTML

<div class="anim">
<span>Set</span> <span>a</span> <span>path</span> <span>and</span> <span>get</span> <br><span class="highlight">to&nbsp;</span><span class="highlight">your&nbsp;</span><span class="highlight">destination&nbsp;</span></div>

Answer 1

好的，我知道了。正确的代码在问题中，这里只是摆脱闪烁的附加代码。 为了让闪烁消失，你必须在同一个元素上使用一个额外的类(我们将它命名为:viss)，将这个 css 添加到它:

.viss{
    visibility: hidden;
}

然后在视口(viewport)中使用以下方法删除它:

.removeClass('viss')

在那之后一切都很顺利并且完美无缺。