Javascript鼠标悬停/鼠标悬停动画按钮

我有一个按钮，在鼠标上方我希望它以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++;
    };
}

函数rollRight（）{
var i=0；
而（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);
    }
}

函数rollRight（）{
var left=parseInt（imgThumb.style.left）；
如果（左<50）{//或任何其他值
imgThumb.style.left=左+10+‘px’；
animate=setTimeout（rollRight，20）；
}
}
函数revert（）{
var left=parseInt（imgThumb.style.left）；
如果（左<50）{//或任何其他值
imgThumb.style.left=左+-10+'px'；
animate=setTimeout（rollRight，20）；
}
}

在恢复过程中，我很难让它向后移动。它可能在if中（左试试这个

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，它将清除间隔，并完成操作。

试试这个

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

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

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

var animate=null；
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); 
    }
}

函数rollRight（）{
如果（动画）clearTimeout（动画）；
var left=parseInt（imgThumb.style.left）；
如果（左<50）{//或任何其他值
imgThumb.style.left=左+10+‘px’；
animate=setTimeout（rollRight，20）；
}
}
函数revert（）{
如果（动画）clearTimeout（动画）；
var left=parseInt（imgThumb.style.left）；
如果（左>0）{
imgThumb.style.left=（左-10）+“px”；
动画=设置超时（恢复，20）；
}
}

var animate=null；
函数rollRight（）{
如果（动画）clearTimeout（动画）；
var left=parseInt（imgThumb.style.left）；
如果（左<50）{//或任何其他值
imgThumb.style.left=左+10+‘px’；
animate=setTimeout（rollRight，20）；
}
}
函数revert（）{
如果（动画）clearTimeout（动画）；
var left=parseInt（imgThumb.style.left）；
如果（左>0）{
imgThumb.style.left=（左-10）+“px”；
动画=设置超时（恢复，20）；
}
}

如果你想坚持使用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);
    }
}

var totalPixels=100；
var增量=10；
var帧时间=20；
var numFrames=总像素/增量；
var-curFrame=0；
函数rollRight（）{
imgThumb.style.left=parseInt（imgThumb.style.left）+增量+'px'；
if（curFrame++

---

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

如果您想继续使用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);
    }
}

var totalPixels=100；
var增量=10；
var帧时间=20；
var numFrames=总像素/增量；
var-curFrame=0；
函数rollRight（）{
imgThumb.style.left=parseInt（imgThumb.style.left）+增量+'px'；
if（curFrame++

---

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

Joseph和pckill都可以向右运行，但我在onmouseout revert back方面遇到了问题。函数rollRight（）{var left=parseInt（imgThumb.style.left）；如果（左<50）{//或任何其他值imgThumb.style.left=left+10+'px'；animate=setTimeout（rollRight，20）；}}函数revert（）{var left=parseInt（imgThumb.style.left）；if（左<50）{//或任何其他值imgThumb.style.left=left+-10+'px'；animate=setTimeout（rollRight，20）; } }添加负值或减法不会将其向后移动吗？是的，应该是这样，但您忘记更改if语句。我将更新我的答案。您还忘记在

setTimeout

中更改函数名。我还添加了

cleartimout

，用于在上一个动画尚未完成时开始还原的情况。此工作没有if（动画）的ks，但是如果你把它滚动到很多倍，它会非常快。如果我离开if（动画）clearTimeout（动画）；我得到错误animate未定义我假设您在代码中的某个地方有这个变量..您可以通过在函数声明之前添加它来修复它。Joseph和pckill都致力于右转，但我在onmouseout revert back.function rollRight（）方面遇到了问题。{var left=parseInt（imgThumb.style.left）；如果（左<50）{//或任何其他值imgThumb.style.left=left+10+'px'；animate=setTimeout（rollRight，20）；}}函数revert（）{var left=parseInt（imgThumb.style.left）；if（左<50）{//或任何其他值imgThumb.style.left=left+-10+'px'；animate=setTimeout（rollRight，20）}}不会加一个负值或减法将其向后移动吗？是的，应该这样做，但您忘记更改if语句。我将更新我的答案。您也忘记更改func