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动画：动画后改变属性的值？

回答

相关问题