I'd like to know how to manipulate the h1 tag for my workout. When I click the button the animation in JavaScript starts and the h1 is hidden, and when the animation comes to an end the h1 appears again in the same place. But when I click on the animation to start again the h1 does not hide anymore. I would like to know what method I use so that every time I click the h1 button is hidden and appears at the end of the animation.
function myMove() {
var elem = document.getElementById("square1");
var h = document.getElementById("h1");
var pos = 0;
var id = setInterval(frame, 5);
function frame() {
if (pos == 750) {
clearInterval(id);
h.style.visibility = "visible";
} else {
pos++;
elem.style.top = pos + "px";
elem.style.left = pos + "px";
}
}
h.style.visibility = "hidden";
var elemen = document.getElementById("square2");
var pos = 0;
var id = setInterval(fram, 5);
function fram() {
if (pos == 750) {
clearInterval(id);
} else {
pos++;
elemen.style.top = pos + "px";
elemen.style.right = pos + "px";
}
}
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script><sectionid="javascript">
<div class="box">
<div id="square1"></div>
<div id="square2"></div>
<button id="btn" onclick="myMove()">CLIQUE</button>
<h1 id="h1">PEQUENA ANIMAÇÃO COM JAVASCRIPT</h1>
</div>
</section>