Анимация. Возникла проблема с Анимацией в JS(

[stanislav96]

Вот, начал писать функцию для анимации..

var anim_ = {};
function anim(e){
  return {
	'go' : function(param, time, z){
	  if(e){
	    anim_[e] = true;
	    var tm = new Date().getTime();
	    setTimeout(function(){
		var pr = ((new Date().getTime()) - tm) / time;
		  z(e,pr);
		  if(pr < 1 && anim_[e]){
		    setTimeout(arguments.callee, 50);
		  };
	    }, 50);
	  };
	  return this;
	},
	'stop' : function(){
	  delete anim_[e];
	  return this;
	}
  };
};

Пример использования:

<div id="lo">text</div>
<script>
var pb = document.getElementById('lo');
pb.onmouseover = function(){
  anim(this).stop().go([12, 15], 500, function(e, l){
    e.style.fontSize = 15 - 12 * l + 12 +'px';
  });
};
pb.onmouseout = function(){
  anim(this).stop().go([15, 12], 500, function(e, l){
    e.style.fontSize = 12 - 15 * l + 15+'px';
  });
};
</script>

Проблема в том, чтобы сделать остановку анимации.. при отведении курсора, если элемент ещё не до конца "анимировался", чтобы он анимированно начал возвращаться в предыдущее состояние..

[stanislav96]

UP

[stanislav96]

up-up

[danik.js]

че за z ?
Ты должен по таймеру анимировать все элементы, которые нужно в данный момент анимировать. Если все проанимировал - больше не запускаешь таймер до следующей анимации. И да, вместо setInterval нужно использовать requestAnimationFrame

[stanislav96]

а можно пример?

[danik.js]

var requestAnimationFrame = window.requestAnimationFrame ||
    window.mozRequestAnimationFrame ||  
    window.webkitRequestAnimationFrame ||
    window.msRequestAnimationFrame ||
    window.oRequestAnimationFrame ||
    function(callback) {
        setTimeout(callback, 1000/60);
    };