为什么我的元素不会消失？

Question

So far my website that I am doing only animates text that is specified in "var txt".

My issue is trying to get the following elements(an image and some text) to fade in after the first function (typeWriter) is finished executing.

    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

    var i = 0;
    var txt = 'Test';
    var speed = 50;
    window.onload = function typeWriter(callback){
        if (i < txt.length){
        document.getElementById("type").innerHTML += txt.charAt(i);
        i++;
        setTimeout(function(){typeWriter(callback)}, speed);
        }else if(typeof callback == 'function'){
         callback();
        }
    }
    function fader(){
        $("#fade").fadeIn("slow");
    }

    typeWriter(callback);

<!-- Html below -->

    <div class="subSection">
    <div id="fade">
        <h2 id="type"></h2>
        <img src="ring.jpg" alt="rings">
        <p>Now comes in a range of different colours and sizes.<br>Pricing from €149.99</p>
        <p><a href=order.html class="button">Buy Now</a></p>
    </div>
</div>

Answer 1

@Noface was faster than me, but since my solution is different, I still feel like posting it. The major difference is that it does not expose global variables. That means that you can have multiple instances of it running on a page.

Here you go:

 function typeWriter(options) { // Getting options or using default values var settings = { element: options.element, text: options.text || "Typewriter", speed: options.speed || 100, complete: options.complete || function() {} }; // Internal state var state = { i: 0, len: settings.text.length }; (function writeLetter() { if (state.i >= state.len) return settings.complete(); settings.element.innerHTML += settings.text.charAt(state.i); state.i++; setTimeout(writeLetter, settings.speed); })(); } function fader() { $("#fade").fadeIn("slow"); } window.onload = function() { // Call the function with options typeWriter({ element: document.getElementById("type"), text: "Hello world!", speed: 50, complete: fader }); }; 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <h2 id="type"></h2> <div id="fade" style="display: none">I'm fading!</div> 

Answer 2

After fixing the intial syntax errors, there were some issues to solve. The onload will fire and pass its own arguments, not the callback you want. So instead wrap it in a callback function and call the function with the chosen callback. Alternatively use onload = typeWriter.bind(null, fader) which passes fader as the callback function. Next you want to set the #fade element to display: none in your css so it starts hidden, and then move your txt #type outside the fade div, so it is visible and you can see the auto-typing animation you made.

You can define the typeWriter as a function, and then call it in the window.onload event:

 var i = 0; var txt = 'Test'; var speed = 50; function typeWriter(callback){ if (i < txt.length){ document.getElementById("type").innerHTML += txt.charAt(i); i++; setTimeout(function(){typeWriter(callback)}, speed); } else if(typeof callback == 'function'){ callback(); } } function fader(){ $("#fade").fadeIn("slow"); } window.onload = function(){ typeWriter(fader); } 

 #fade { display: none; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div class="subSection"> <h2 id="type"></h2> <div id="fade"> <img src="ring.jpg" alt="rings"> <p>Now comes in a range of different colours and sizes.<br>Pricing from €149.99</p> <p><a href=order.html class="button">Buy Now</a></p> </div> </div>