I am rather new to programming and have just begun learning Javascript. I creating a personal portfolio in which I want an image of myself to slide horizontally from one end of the screen the other end. I have the code that gets it to slide right horizontally, but I do no know how to stop it.

My code looks like this at the moment:

var move = null;

function doMove() {
    move.style.left = parseInt(move.style.left) + 2 + 'px';
    setTimeout(doMove);
}
function init() {
    move = document.getElementById("myimge");
    move.style.left = "0px";
    doMove();
}
window.onload = init;

I think I am supposed to write an if statement and call on the clearTimeout function to stop the animation, but I cant figure out the code. Any assistance would be great.

I am rather new to programming and have just begun learning Javascript. I creating a personal portfolio in which I want an image of myself to slide horizontally from one end of the screen the other end. I have the code that gets it to slide right horizontally, but I do no know how to stop it.

My code looks like this at the moment:

var move = null;

function doMove() {
    move.style.left = parseInt(move.style.left) + 2 + 'px';
    setTimeout(doMove);
}
function init() {
    move = document.getElementById("myimge");
    move.style.left = "0px";
    doMove();
}
window.onload = init;

I think I am supposed to write an if statement and call on the clearTimeout function to stop the animation, but I cant figure out the code. Any assistance would be great.

• javascript
• animation

Share Improve this question Follow edited Oct 31, 2016 at 3:12 user3589620 asked Oct 30, 2016 at 23:43 MwewolMwewol 3311 gold badge11 silver badge55 bronze badges 0

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 1

The key is that you're calling doMove() recursively, using setTimeout() to displace the element at a framerate that is perceptible to the human eye. To stop a recursive function, introduce a condition to terminate it, like so:

var move = null;
var body_width = document.body.clientWidth;

function doMove() {
    var rect = move.getBoundingClientRect();

    // end recursion when the element's displacement to the right matches the width of the body element containing it
    if(rect.right >= body_width) {
      return;
    }

    move.style.left = parseInt(move.style.left) + 2 + 'px';
    setTimeout(doMove); // could also use requestAnimationFrame(doMove);
}

function init() {
    move = document.getElementById("myimage");
    move.style.left = "0px";
    doMove();
}

window.onload = init;

Demo

---

Consider using CSS transforms instead of modifying left/right properties, as transforms are better optimised and will yield a better frame rate.

It is also remended to use requestAnimationFrame instead of setTimeout. Fortunately, it works in much the same way for your use case.

Optimised demo

---

You could also just use CSS and nothing else. You could handle the animation using CSS transitions or CSS keyframe animation.

CSS-based Demo

Add terminate condition in the doMove function

function doMove() {
    move.style.left = parseInt(move.style.left) + 2 + 'px';

    if(terminateConditionFullfiled)
        return;

    setTimeout(doMove);
}