Question

我在某些头条新闻中有这个动画，并且希望它只运行一次，但每次都可以在滚动时触发，无论是向上还是向下。因为它现在只运行一次或无限循环。

$(function(){

    $("#slogan1").typed({
        strings: ["first string of text", "second string of text", "third string of text"],
        typeSpeed: 30,
        backDelay: 1500,
        loop: false,
        contentType: 'html', // or text
        // defaults to false for infinite loop
        loopCount: false,
        callback: function(){ foo(); },
        resetCallback: function() { newTyped(); }
    });

    $(".reset").click(function(){
        $("#slogan1").typed('reset');
    });

});

function newTyped(){ /* A new typed object */ }

function foo(){ console.log("Callback"); }

如果它具有任何相关性，那么这个动画被包装在一个容器中，其中的动画完全符合我的要求，在双向滚动时会被触发作为休闲：

$(window).scroll(function () {
    $('.slideright').each(function () {
        var imagePos = $(this).offset().top;
        var imageHeight = $(this).height();
        var topOfWindow = $(window).scrollTop();

        if (imagePos < topOfWindow + imageHeight && imagePos + imageHeight > topOfWindow) {
            $(this).addClass("slideRight");
        } else {
            $(this).removeClass("slideRight");
        }
    });
});

JavaScript对我来说是外语，所以请在完整代码的上下文中提供您的建议，否则我可能不知道如何处理它。
非常感谢你的帮助！

HTML

<div class="container element-to-hide slideright">
<h1>Some text<span id="slogan1"></span></h1>
</div>

Answer 1

这是否符合您的要求：

$(window).scroll(function(){
    $("#slogan1").typed('reset');

    $("#slogan1").typed({
        strings: ["first string of text", "second string of text", "third string of text"],
        typeSpeed: 30,
        backDelay: 1500,
        loop: false,
        contentType: 'html', // or text
        // defaults to false for infinite loop
        loopCount: false,
        callback: function(){ foo(); },
        resetCallback: function() { newTyped(); }
    });
});

$(".reset").click(function(){
    $("#slogan1").typed('reset');
});

function newTyped(){ /* A new typed object */ }

function foo(){ console.log("Callback"); }

小提琴：https://jsfiddle.net/fvL8gdwb/4/

每次滚动时如何触发此动画

1 个答案: