Make a Javascript Animation continue without resetting - javascript

I am trying to get this function to be repeatable without resetting.
For example, when i press a button with this function, the button will move to the right from 0px to 100px. When I press the button again it will go from 100px to 200px and so on. It is supposed to animate as well, so it moves 1px at a time until the loop ends.
The code below only works as a one time use, as in it will move from 0px to 100px and pressing it again makes it go 0px to 100px.
I've been working on this for several hours and looked through many sources of help before asking.
function goRight() {
var pos = 0;
var count = pos;
var elem = document.getElementById("main");
var id = setInterval(move, 5);
function move() {
if(pos == count + 100){elem.style.left = pos + 'px'; clearInterval(id);}
else {pos++; elem.style.left = pos + 'px';}
}
}

function goRight() {
var elem = document.getElementById("main"); // the element
var origin = parseInt(elem.style.left) || 0; // get the left of the element (as an origin for the animation), 0 if not set yet
var pos = 0; // pos initialized to 0
var id = setInterval(move, 5);
function move() {
if(pos == 101) { clearInterval(id); } // if pos is 101, then stop the animation
else { pos++; elem.style.left = (origin + pos) + 'px';} // if not, then increment it and set the left of the element to pos + origin
}
}

I think you must only make pos as a global variable and initiate it outside goRight function
like this:
var pos = 0;
function goRight() {
var count = pos;
var elem = document.getElementById("main");
var id = setInterval(move, 5);
function move() {
if(pos == count + 100){elem.style.left = pos + 'px'; clearInterval(id);}
else {pos++; elem.style.left = pos + 'px';}
}
}
Whats wrong in your code is only every time you call goRight pos will be set to zero and again it will begin from start.
but with a global variable it will be save for next time interval will run.

Related

My JS animation resets its marginTop, but not its marginLeft

Im supernew to javascript animations. I just found out how to add the 2nd movement to my animation.
When running funk() function, the ball goes down to the right. When it triggers funktre() function, the ball goes to its starting marginTop position but keeps its marginLeft position.
Why does it return to the top? I want the 2nd animation, funktre(), to move the ball from the funk() ending position.
const ball = document.querySelector("#en");
ball.addEventListener("click", funk);
function funk() {
let id = null;
let position = 0;
clearInterval(id);
id = setInterval(funkto, 5);
function funkto() {
if (position == 450) {
clearInterval(id);
funktre();
// sett en ny funksjon her
}
else {
stop();
position++;
ball.style.marginLeft = position + "px";
ball.style.marginTop = position + "px";
}
}
};
function stop() {
ball.removeEventListener("click", funk);
};
function funktre() {
let idd = null;
let pos = 0;
clearInterval(idd);
idd = setInterval(funkfire, 5);
function funkfire() {
if (pos == 200) {
clearInterval(idd);
// ny funksjon her
}
else {
pos++;
ball.style.marginTop = pos + "px";
}
}
}
"I want the 2nd animation, funktre, to move the ball from the funk() ending position."
Then you should not initialize its starting position at zero, but at its current position.
function funktre() {
let idd = null;
let pos = parseInt(ball.style.marginTop); // set the initial pos to current pos
clearInterval(idd);
idd = setInterval(funkfire, 5);
function funkfire() {
if (pos == 200) {
clearInterval(idd);
// ny funksjon her
}
else {
pos++;
ball.style.marginTop = pos + "px";
}
}
}
If you intend to program more animations, or even a video game, I would suggest storing the ball top/left position in a global variable (which you could access from any scope).

how to hide an element at the end of javascript animation

I know similar questions have been asked before, but the answers did not help me because they are too advanced for me and my simple animation. I am at the very beginning of javascript. On my website, I have the simple code for moving an element from one posotion to another. I would like to have it disappear when it reaches the final position, not fading out, just suddenly disappear. Should I do it with opacity change? How do I write it? My code is the following.
function myMove() {
var elem = document.getElementById("animation");
var pos = 100 ;
var id = setInterval(frame, 5);
function frame() {
if (pos == 380) {
clearInterval(id);
} else {
pos++;
elem.style.top = pos + 'px';
elem.style.left = pos + 'px';
}
}
}
To hide an element simply set style.display to 'none'.
For example:
function myMove() {
var elem = document.getElementById("animation");
var pos = 100 ;
var id = setInterval(frame, 5);
function frame() {
if (pos == 380) {
clearInterval(id);
// this is the key line
elem.style.display = 'none';
} else {
pos++;
elem.style.top = pos + 'px';
elem.style.left = pos + 'px';
}
}
Just as a heads up, using chained setTimeouts can be better than using setInterval in HTML animation. The reason being that if the animation (and/or other scripts on the page) takes longer than the interval the browser will become unresponsive. With a chain of setTimeouts, the clock doesn't start ticking until the end of the current frame.
For example, you could do:
function myMove() {
var elem = document.getElementById("animation");
var pos = 100 ;
function frame() {
if (pos == 380) {
// this is the key line
elem.style.display = 'none';
} else {
pos++;
elem.style.top = pos + 'px';
elem.style.left = pos + 'px';
// set a timeout for 5 ms
setTimeout(myMove, 5);
}
}

Looping an animation in javascript continuously

My question is how to loop an animation continuously. For example please follow the link below of W3School where a simple box moves from top to bottom and then stops.
http://www.w3schools.com/js/tryit.asp?filename=tryjs_dom_animate_3
But what I can't figure out is how to make this box animation non stop i.e. after it goes to the bottom it again moves up to its starting place and the animation continues forever.
You can make these adjustments to the JS:
var elem = document.getElementById("animate");
var pos = 0;
var id = setInterval(frame, 10);
function frame() {
if (pos == 150) { pos = 0; }
pos++;
elem.style.top = pos + 'px';
elem.style.left = pos + 'px';
}
#container { width: 200px; height: 200px; position: relative; background: yellow; } #animate { width: 50px; height: 50px; position: absolute; background-color: red; }
<div id ="container">
<div id ="animate"></div>
</div>
Delete the clearInterval(id); that stops the animation timer and in its place add this pos = 0; to reposition the box every time it reaches the corner.
Change script to this and it won't stop anymore. runAlready is needed to lock appearing of the second rectangle and pos=0 in the if statement set the coordinate of the rectangle to the top left corner.
var runAlready=false;
function myMove() {
if(!runAlready){
runAlready=true;
var elem = document.getElementById("animate");
var pos = 0;
var id = setInterval(frame, 5);
function frame() {
if (pos == 350) {
pos=0;
} else {
pos++;
elem.style.top = pos + 'px';
elem.style.left = pos + 'px';
}
}
}
}
The setInterval(frame, 5) tells the program to call the frame() function every 5/1000th of a second. That is what creates the animation.
The clearInterval(id) function tells it to stop the animation.
Take a look at the change I added below. It uses a variable named 'direction' to change the direction of the box. Rather than stopping the animation when the box gets to the LR corner, it reverses the direction and keeps going.
function myMove() {
var elem = document.getElementById("animate");
var pos = 0;
var id = setInterval(frame, 5);
var direction = 1;
function frame() {
if (pos == 0){
direction = 1;
} else if(pos == 350){
direction = -1;
}
pos += direction;
elem.style.top = pos + 'px';
elem.style.left = pos + 'px';
}
}

Stop div scrolling past set position

I adapted this code to create a large div which scrolls horizontally inside a smaller div, depending on the position of the mouse.
You can see my example here.. http://thetally.efinancialnews.com/tallyassets/20years/index.html
What I am trying to achieve is for the inner (yellow) div to stop at a maximum of left:0px, in other words the far left of the yellow div will become stuck to the far left of the outer div if you go that far.
I tried to implement this with an 'if else' statement, however as this piece of code gets run every 30th of a second it creates a strange result, which I can't find a solution for. I'm sure its very simple but its stumped me
You can see my code here...
var x=0,
rate=0,
maxspeed=10;
var backdrop = $('.container');
var years = $('.events');
$('.direction', backdrop).mousemove(function(e){
var $this = $(this);
var left = $this.is('.left');
if (left){
var w = $this.width();
rate = (w - e.pageX - $(this).offset().left + 1)/w;
} else {
var w = $this.width();
rate = -(e.pageX - $(this).offset().left + 1)/w;
}
});
backdrop.hover(function(){
var scroller = setInterval( moveBackdrop, 30 );
$(this).data('scroller', scroller);
},
function(){
var scroller = $(this).data('scroller');
clearInterval( scroller );
});
function moveBackdrop(){
if ( parseInt(years.css("left"), 10) <= 0 ) {
x += maxspeed * rate;
var newpos = x+'px';
years.css('left',newpos);
} else {
years.css('left','0');
}
}
The code in question is right here at the end^
Is this what you were trying to do?
function moveBackdrop(){
if ( parseInt(years.css("left"), 10) <= 0 && rate < 0 ) {
// Means that the element is already at left: 0 or less,
// and we are trying to move it even more left with rate being negative.
// So keep the element at left: 0
years.css('left','0');
} else {
x += maxspeed * rate;
var newpos = x+'px';
years.css('left',newpos);
}
}
Extra note for future: parseInt uses base 10 by default :) so parseInt("20px") will equal 20
Final Edit: Ah there is an even better way to do it.
function moveBackdrop(){
x += maxspeed * rate;
if( x < 0 ) x = 0; // If left less than 0, fix it at 0
var newpos = x+'px';
years.css('left',newpos);
}

Moving div elements stored in array

var move = function() {
Xpos = Math.round(Math.random() * 95);
food[num].css('left', Xpos + '%');
interval = setInterval(function() {
console.log(i);
var posTop = food[num].offset().top / $(window).height() * 100;
while(posTop < 80) {
if(posTop === 80) {
num++;
break;
}
posTop += 1;
food[num].css('top', posTop + '%');
break;
}
}, speed);
}
//Color the circle
circleColor();
move();
}
OK so this is my code. It creates a circle(a <div> element) on top of the screen and gives it a random x coordinate. Than it puts it in food[] array. The entire code starts by clicking the button, but every time I press the button again the circle that was last moving stops, function creates a new one and the new one moves. Is there a way I can make all elements in the array move without depending on each other?
http://jsfiddle.net/yqwjqx31/
I understand why this happens but I have no idea how to fix it.
First you're using a global variable num in setInterval function handler, so its value get modified while using it in new cercle create, secondly you're clearing interval of the last cercle you created before creating a new cercle. It means you're sharing the same interval between all cercles. Use instead an array of intervals just like var food =[] and use a temporary variable to prevent the index value modification inside your setInterval handler. Here's a working fiddle
//Interval
var interval =[];
var tempNum = num;
interval[num] = setInterval(function() {
var posTop = food[tempNum].offset().top / $(window).height() * 100;
while(posTop < 80) {
if(posTop === 80) {
break;
}
posTop += 1;
food[tempNum].css('top', posTop + '%');
break;
}
}, speed);
Increment your num variable
//Color the circle
circleColor();
move();
num++;
Your move function is only responsible for moving the last generated div via createCircle. If you want to move them all till collision, you need to loop through them all and move them accordingly. Or, you can animate them via CSS.
Here is the working version :
http://jsfiddle.net/yqwjqx31/3/
Notice how the setInterval callback loops through all the div and pushes them down until their height is 80.
var move = function () {
interval = setInterval(function () {
for (var i = 0; i < food.length; ++i) {
var posTop = food[i].offset().top / $(window).height() * 100;
if (posTop < 80) posTop += 1;
food[i].css('top', posTop + '%');
}
}, speed);
}

Categories