JavaScript Анимация: значение измененного свойства после анимации?

Question

У меня есть код javaScript, который сместит div слева направо, изменив его свойство «left» css, когда мышь нажата на div. Код работает отлично. Изначально div's 'left = 0' Предположим, я хочу сместить div в случайное число. Я сделаю это как.

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 пикселей? потому что когда я нажал на div, первый раз его левый стал 145 px и больше не остается 0. В моем случае, что происходит, когда я нажимаю на снова, сначала он возвращается к 0 px, а затем перемещается на 30 пикселей.

Answer 1

Это звучит, как это было бы намного легче с переходом:

CSS:

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

(Replace этот класс, как необходимо для вашего кода)

JS:

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

Это все, что вам нужно. Браузер плавно перемещает элемент из одной позиции в другую за определенное время.