Animation is not fluid

Asked

Viewed 50 times

3

Opa galera I have a div that is my site header, I want to hide it by clicking a button and make it appear when clicking another button. I can hide and the movement is the way I want, however at the time to make appear back does not have the same fluidity and the image is not on the screen, disappearing at the end.

function myMove() {
    var elem = document.getElementById("box-toogle"); 
    var pos = 0;
	var t = 0;
	var id = setInterval(frame, 5);
    function frame() {
        if (pos == 160) {
            clearInterval(id);
        } else {
            pos--; 
            elem.style.top = pos + 'px'; 
				t++;
        }
}

function myMove1() {
    var elem = document.getElementById("box-toogle"); 
    var pos = 150;
	var t = 0;
	var id = setInterval(frame, 5);
    function frame() {
        if (pos == 0) {
            clearInterval(id);
        } else {
            pos--; 
            elem.style.top = pos + 'px'; 
				t++;
        }
}
#box-toogle {
	width: 100%;
    height: 150px;
    position: relative;
}
<html>
  <head>
  </head>
<body>
<header id="box-toogle">texto</header>
 </body>
</html>

I’m a beginner in javascript, if you can help me thank you

javascript

  • looking at your code, the methods myMove and myMove1 doesn’t have the last } to terminate the method, make the correction and test again.

  • Their functions are not closed, each one missing a key at the end. I advise using a good IDE for programming, which makes Highlight in the codes and helps you see and perceive these basic errors, Netbeans is one of them.

  • Opa excuse me at the time of copy and paste I ended up forgetting the last key, in my code is closed and still not fluid, I will change the code here glued to agree. I await your opinion thank you.

1 answer

2


This type of animations should be made with CSS.

Then all you need is 

#box-toogle {
    // ...

    top: 0px;
    transition: top 1s;
}

#box-toogle.escondido {
    top: -100px;
}

and when the element is clicked you add or remove that class escondido.

Example:

var header = document.getElementById('box-toogle');
header.addEventListener('click', function() {
    this.classList.toggle('escondido');
});
#box-toogle {
    width: 100%;
    height: 150px;
	border: 2px #ddf solid;
	font-size: 80px;
	
	top: 0px;
    position: relative;
    transition: top 1s;
}

#box-toogle.escondido {
    top: -100px;
}
<header id="box-toogle">texto</header>

jsFiddle: https://jsfiddle.net/zdt1vced/

  • Sergio thank you very much, I don’t know if it’s a beginner’s question but I can’t make work the code you gave me in jsFiddle runs smoothly, now when I go to Notepad and run in the browser the same doesn’t happen, I copied and pasted as you passed me need to make + any changes? Another thing you know tell me because it is not recommended to make effects just like that in js? , thank you immensely.

  • @Veterankuno1 on CSS vs JS check out here: http://answall.com/q/51542/129

  • @Veterankuno1 regarding not working on your page, put Javascript at the bottom of the page. If it doesn’t work put here a Pastebin with the whole page.

  • Sergio really putting at the end of the page worked, did not understand why it did not work on an external js. Grinding you a little bit + and lazy to search here in the forum what book you recommend, I’m using codeAcademy to learn the basics + I already feel the need for other alternatives, hug and thank you very much!

  • 1

    @Veterankuno1 glad it worked. If you want you can mark the answer as accepted. You need an onload function for the code to only run when the page loads. If you put your code inside window.onload = function () { ... }; should already work in an external directory as well. Or else tag <script> at the end of the body.

Browser other questions tagged javascript

You are not signed in. Login or sign up in order to post.