Question

我建立了一个代码，该代码应将一个类添加到div中，但是什么也没发生。也许您可以帮助我进行故障排除。实际上，我实际上是从codePen复制了代码，在codePen上它可以正常工作，而在我的网站上却没有。也许是因为我正在使用WordPress？如何告诉浏览器执行此代码？

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

其工作方式：第二个div在视口中出现时应淡入。

新代码：

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;
}

，然后在视口中使用以下命令将其删除：

.removeClass（'viss'）

此后，一切都变得流畅且完美无瑕。

Answer 2

我已更新代码，请检查代码段。 请确保您在整页中检查代码段。

function istScrolledIntoView(elem) {
    var docViewTop = $(window).scrollTop();
    var docViewBottom = docViewTop + $(window).height();

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

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


$(window).scroll(function(event){
   $('.textbox').each(function () {
        if (istScrolledIntoView(this) === true) {
            $(this).addClass('visible');
        }
    });
});

.textbox {
    opacity: 0;
    transition: all .5s;
        background:red;
        height:300px;
}
.textbox.visible {
    opacity: 1;
}
.anotherdiv {
    width:100%;
    background:blue;
    height:100vh;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="anotherdiv">

</div>
<div class="textbox">

</div>

为什么我的基于视口的脚本不添加类

2 个答案: