沒有jQuery的Javascript動畫

我在擺弄this網站一天，現在我真的在掙扎着。當我修改function move時，我可以很容易地將動畫反轉，這樣如果停止爲負數-stop-(-stop*delta)+"px"並且它有效。有點..對於easeOut(bounce)它運作良好。但是當我使用線性時，項目反彈到我定義爲止點的位置，然後使用線性效應返回到之前的位置。任何人都可以幫助我如何輕鬆地扭轉它的動畫效果嗎？沒有jQuery的Javascript動畫

謝謝！

來源

2015-05-29 jPO

請您提供的jsfiddle與您的代碼？ –

等一下。我現在準備。 – jPO

這裏是小提琴[https://jsfiddle.net/bd59y61h/](https://jsfiddle.net/bd59y61h/） – jPO

我願做你的代碼幾點意見：

您768,16行結束後添加到處;。這是一個很好的做法。
在你的情況下修復問題你應該設置start: 0而不是start: 200。它需要，因爲您將item元素style="left:200px"

所以應該

document.getElementById('item').onclick = function (e) { 
    e.target.move({ 
     direction: "left", 
     delta: linear, 
     stop: -200, 
     duration: 600, 
     start: 0 // instead of 200 
    }); 
};

這裏我jsfiddle

來源

2015-05-29 13:42:43

謝謝你：D這是我唯一沒有嘗試過的事情lol – jPO

我很高興我幫你 –

我做了這個JSFIDDLE。

的Javascript

var max = false; 

function move(elem) { 


    var left = 0 

    if(max) 
     left = 100; 
    function frame() { 

     if(!max) 
     { 
    left++ // update parameters 
     } 
     else 
     { 
     left-- 
     } 

    elem.style.left = left + 'px' // show frame 

    if (left == 100) // check finish condition 
    { 
     clearInterval(id) 
     max = true; 
    } 
     if(max == true && left == 0) 
     { 
        clearInterval(id) 
     max = false; 
     } 
    } 

    var id = setInterval(frame, 10) // draw every 10ms 

    };

來源

2015-05-29 13:21:57

非常感謝。我知道你是第一個回答我的問題，但在你發佈之後，我發佈了一個我的「圖書館」的小提琴。我忘了提及我在原型函數中使用了整個函數集合。儘管如此，非常感謝你的努力！ – jPO

沒有jQuery的Javascript動畫

回答

相關問題