JavaScript動畫：動畫後改變屬性的值？

我有一些javaScript代碼，當鼠標點擊div時，通過改變它的'left'css屬性從左向右滑動div。代碼工作得很好。最初，div's'left = 0' 假設我想將div滑動到某個隨機數。我會這樣做。JavaScript動畫：動畫後改變屬性的值？

function move(){ 
    var final = Math.random()*100 //Lets suppose final gets the value equal to 145 in this case 

    ....code for sliding goes here 

}

所以，現在div的左邊應該等於145px。

現在，當我再次在DIV上單擊，會發生這種情況：

function move(){ 
var final = Math.random()*100 //Lets suppose final gets the value equal to 30 in this case 

    ....code for sliding goes here 

}

現在，不應該145px股利幻燈片30 PX？因爲當我第一次點擊div時，它的左邊變成了145px，而不再是0.在我的情況下，當我再次點擊時，首先回到0px，然後移動30px。

來源

2013-05-18 Navneet Saini

什麼是您的動畫代碼？ –

@Kolink動畫代碼太長了！我在JAVAscript中也使用了緩動效果..它太冗長以至於無法在這裏發佈 –

Math.random（）* 100如何讓你145？ – Nanz

這聽起來像它會是一個更容易與過渡：

CSS：

.moving_element {transition:all 0.4s ease; -webkit-transition:all 0.4s ease;}

（根據需要爲您的代碼替換類）

JS：

elem.style.left = Math.random()*100+"px";

這就是你所需要的。瀏覽器將在定義的時間內順暢地將元素從一個位置移動到另一個位置。

來源

2013-05-18 19:47:18

我想用Javascript來做，而不是CSS。我已經知道CSS過渡更容易。但目前學習JavaScript :) –

哦，我明白了。 * La souris est en-dessous de la table。 Le chat est sur la chaise。 Et le singe est sur la branche。* –

JavaScript動畫：動畫後改變屬性的值？

回答

相關問題