Question

我有一个按钮和onmouseover我希望它以10像素移动100个像素移动然后停止。移动不是问题，它的停止。我可以用jquery做这个没有问题，但我需要学习如何在javascript中从头开始。这是我到目前为止向右移动的脚本。

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

它移动它就好了所以停止它我尝试取5x10 = 50px的循环并再次写为

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

现在，我想我错过了一个让它返回while函数的[]值，但我不知道如何让它工作。一旦我采取了正确的行动，我就可以采用相同的原则将其移回去。

如果有人可以帮我解决这个问题，那会很棒。如果你有一个更好的脚本来做动画只是javascript，没有库，那也很棒。

编辑：因为将其留作评论效果不佳，这是我当前的代码

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);
    }
}

在恢复中我遇到了让它回来的问题。它可能在if（left＆lt; 50）部分。

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); 
    }
}

Answer 2

如果您想坚持使用setTimeout，那么您的第一个就已经接近了。我将一些硬编码的数字移动到变量中：

var totalPixels = 100;
var increment = 10;
var frameTime = 20;
var numFrames = totalPixels / increment;
var curFrame = 0;

function rollRight() {      
    imgThumb.style.left = parseInt (imgThumb.style.left) + increment + 'px';

    if(curFrame++ < numFrames) {
        animate = setTimeout(rollRight,frameTime);
    }
}

您也可以切换到使用setInterval，然后每次间隔触发时，根据某个递增值决定是否应该停止间隔。

Answer 3

试试这个

var i = 0;
var moveInterval = setInterval(function(){
    if(i>=5) clearInterval(moveInterval);       
    rollRight();
    i++;
},20);

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

一旦达到5，它将清除间隔，并完成。

Javascript mouseover / mouseout动画按钮

3 个答案: