Question

I have a button and onmouseover I want it to move right 100ish pixels at 10 pixels a move then stop. The moving isn’t a problem its the stopping. I can do this no problem with jquery but I need to learn how to do it from scratch in javascript. this is my script to move right so far.

function rollRight() {      
    imgThumb.style.left = parseInt (imgThumb.style.left) + 10 + 'px';
    animate = setTimeout(rollRight,20);
}

That moves it right just fine so to stop it i tried taking the amount of loops 5×10=50px and wrote it again as

function rollRight() {
    var i=0;
    while (i < 5) {     
    imgThumb.style.left = parseInt (imgThumb.style.left) + 10 + 'px';
    animate = setTimeout(rollRight,20);
    i++;
    };
}

Now, I think I’m missing a piece to make it return the [] values for the while function, but I’m not sure how to make it work. Once I have the move right I can apply the same principle to move it back onmouseout.

If anyone can help me fix this that would be great. If you have a better script to do the animation that is just javascript, no libraries, that would be great too.

EDIT: Because leaving it as a comment didn’t work well this is my current code

function rollRight() {   
    var left = parseInt (imgThumb.style.left);
    if(left < 50) { // or any other value   
    imgThumb.style.left = left + 10 + 'px';
    animate = setTimeout(rollRight,20);
    }
}

function revert() {   
    var left = parseInt (imgThumb.style.left);
    if(left < 50) { // or any other value   
    imgThumb.style.left = left + -10 + 'px';
    animate = setTimeout(rollRight,20);
    }
}

In the revert I’m having a problem getting it to move back. It’s probably in the if(left<50) part.

Answer 1

var animate = null;

function rollRight() { 
    if(animate) clearTimeout(animate);  
    var left = parseInt (imgThumb.style.left);
    if(left < 50) { // or any other value   
        imgThumb.style.left = left + 10 + 'px';
        animate = setTimeout(rollRight,20);
   }
}

function revert() {
    if(animate) clearTimeout(animate);
    var left = parseInt (imgThumb.style.left);
    if(left > 0) {
        imgThumb.style.left = (left - 10) + 'px';
        animate = setTimeout(revert,20); 
    }
}