Javascript mouseover/mouseout動畫按鈕

我有一個按鈕和onmouseover我希望它移動100像素在10像素移動然後停止。移動並不是一個問題，它的停止。我可以做到這一點沒有jQuery的問題，但我需要學習如何從JavaScript從頭開始。這是我的腳本到目前爲止。Javascript mouseover/mouseout動畫按鈕

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

這動作是正確的就好了所以要停止我試圖採取的循環5×10 = 50像素量，又寫了它作爲

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（左邊< 50）部分。

來源

2012-10-31 horribly_n00bie

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

來源

2012-10-31 22:48:46 pckill

約瑟夫和pckill都爲正確的工作，但我麻煩onmouseout恢復。（）{ function rollRight if（left <50）{//或任何其他值 imgThumb.style.left = left + 10 +'px'; animate = setTimeout（rollRight，20）; } } function revert（）{ var left = parseInt（imgThumb.style.left）; if（left <50）{//或任何其他值 imgThumb.style.left = left + -10 +'px'; animate = setTimeout（rollRight，20）; } } 不會添加負值或減去將其移回原位？ –

是的，它應該，但你忘記改變if語句。我會更新我的答案。 – pckill

你也忘了在'setTimeout'中更改函數名稱。我還添加了'clearTimeout'，以便您在以前的動畫尚未完成時想要開始還原。 – pckill

-1

試試這個

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，它會清除間隔出來，來完成。

來源

2012-10-31 22:46:51 frosty

如果你想堅持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，然後每間隔觸發時，確定是否應基於一些遞增值停止的時間間隔。

來源

2012-10-31 22:49:02 kleezy

Javascript mouseover/mouseout動畫按鈕

回答

相關問題