Question

我正在打算打字动画，但问题通常是我很难调用函数然后当它完成调用另一个函数时，我尝试回调但它通常没用，我需要技术才能如果您能提供解释，请使用动画和功能。检查以下代码

$(document).ready(function(){
    
    var i;
    var counter = 1;
    var text;
        function typeLike(elem,theText){
            var newString = "";
            text = theText;
            for(i = 0; i < counter; i++){
                newString += text.charAt(i);
            }
            $(elem).text(newString);
            counter++;
//            if(counter > text.length){
//                counter = 0;
//            }
        }


    function startTypeLike(elem,str) {
        var randomNum = Math.random()*1000;
        if(counter <= str.length){
            var inter = setTimeout(function(){
                typeLike(elem,str);
                startTypeLike(elem,str);
            },randomNum);
        }
        else{
            $(elem).removeClass("animated");
        }
    }
    startTypeLike(".something","hello all how you doin in this fine day");
    startTypeLike(".other","sup man how you doin in this fine night");
}); // end of ready

body,html{
    height:100%;
    width:100%;
}

*{
    padding:0;
    margin:0;
    box-sizing: border-box;
}

.something{
    font-size: 2em;
    font-family: monospace;
}

.animated::after{
    content:"_";
    animation: fade;
    animation-iteration-count: infinite;
    animation-duration: 1s;
    animation-play-state: running;

}
.animated{

}
@keyframes fade{
    0%{opacity:0}
    50%{opacity:1}
    100%{opacity:0}
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!doctype html>
<html>
  <head>
    <script src="jquery-3.2.1.min.js"></script>
    <link href="try.css" rel="stylesheet" type="text/css"/>
  </head>
  <body>
    <div id="container">
        <p class="something animated"></p>
        <p class="other animated"></p>
    </div>
    <script src="try.js"></script>
  </body>
</html>

Answer 1

如果你向我们展示了你如何尝试实现回调功能以及为什么你没有这样做，那就太好了。一般来说代码有点混乱，但我大部分原样离开了它，只是将回调函数实现为startTypeLike()中的第三个可选参数，并在第一个动画之后触发所述回调中的第二行。您还必须在第一个动画后重置计数器，以便下一个动画从第一个字母开始。

编辑：您可能希望眨眼＆＃34; _＆＃34;第二行只在打字开始时才开始，所以我也实现了它。

＆＃13;

$(document).ready(function(){
    
    var i;
    var counter = 1;
    var text;
        function typeLike(elem,theText){
            var newString = "";
            text = theText;
            for(i = 0; i < counter; i++){
                newString += text.charAt(i);
            }
            $(elem).text(newString);
            counter++;
//            if(counter > text.length){
//                counter = 0;
//            }
        }


    function startTypeLike(elem,str,callback) {
        var randomNum = Math.random()*1000;
        if(counter <= str.length){
            var inter = setTimeout(function(){
                typeLike(elem,str);
                startTypeLike(elem,str,callback); // don't forget to pass the callback function on to the recursive call
            },randomNum);
        }
        else{
            $(elem).removeClass("animated");
            counter = 0;
            callback && callback(); // if a callback function is set, execute it
        }
    }
    startTypeLike(".something","lorem ipsum", function() {
        $('.other').addClass('animated');
        startTypeLike(".other","dolor sit amet");
    });
}); // end of ready

＆＃13;

body,html{
    height:100%;
    width:100%;
}

*{
    padding:0;
    margin:0;
    box-sizing: border-box;
}

.something{
    font-size: 2em;
    font-family: monospace;
}

.animated::after{
    content:"_";
    animation: fade;
    animation-iteration-count: infinite;
    animation-duration: 1s;
    animation-play-state: running;

}
.animated{

}
@keyframes fade{
    0%{opacity:0}
    50%{opacity:1}
    100%{opacity:0}
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="container">
<p class="something animated"></p>
<p class="other"></p>
</div>

＆＃13;

Answer 2

我不仅为结束动画添加了回调，我还重新格式化了代码，希望它有效！

＆＃13;

$(document).ready(function() {
    function typeWriter(el, text, onDone) {
        var part = "";
        type(0);

        function type(i) {
            part += text.charAt(i++);
            $(el).text(part);

            if (i < text.length) {
                var randomDelay = Math.random() * 1000;
                setTimeout(function() { type(i); }, randomDelay);
            } else {
                if (onDone) onDone();
            }
        }
    }

    typeWriter(".something", "hello all how you doin in this fine day", function() {
        typeWriter(".other", "sup man how you doin in this fine night");
    });
}); // End of ready

＆＃13;

body, html {
    height: 100%;
    width: 100%;
}

* {
    padding: 0;
    margin: 0;
    box-sizing: border-box;
}

.something {
    font-size: 2em;
    font-family: monospace;
}

.animated::after {
    content: "_";
    animation: fade;
    animation-iteration-count: infinite;
    animation-duration: 1s;
    animation-play-state: running;
}

@keyframes fade {
    0% { opacity: 0 }
    50% { opacity: 1 }
    100% { opacity: 0 }
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!doctype html>
<html>
  <head>
    <script src="jquery-3.2.1.min.js"></script>
    <link href="try.css" rel="stylesheet" type="text/css"/>
  </head>
  <body>
    <div id="container">
        <p class="something animated"></p>
        <p class="other animated"></p>
    </div>
    <script src="try.js"></script>
  </body>
</html>

＆＃13;

如何在另一个打字动画结束后进行打字动画

2 个答案: