Within my rails app, I have the following code snippet:
window.onload = ->
$("#mycontainer").typewriter()
$("#div1").fadeIn("slow")
This code snippet interacts with the following block of content:
<blockquote class="pull-left">
<p id="mycontainer">A mathematician, scientist, and engineer are each asked: "Suppose we define a horse's tail to be a leg. How many legs does a horse have?" The mathematician answers "5"; the scientist "1"; and the engineer says "But you can't do that! </p>
<small id="author">Emmanuel Mensah </small>
</blockquote>
Upon analyzing the window.onload function present in the code snippet, I understand that it triggers the jquery functionality right after the page finishes loading. However, I noticed that upon initial load, there is a brief moment where the entire text is visible before the typewriting effect (text appearing key by key) takes place. I am seeking guidance on how to ensure that the text remains hidden until the jquery script activates it.
I attempted to apply CSS styling using display:none to the <p> tag, but this adjustment did not yield the desired outcome. Any assistance in resolving this issue would be greatly appreciated.