Всем привет!
у меня есть код:
<html>
<head>
<script src="/animate.js" type="text/javascript"></script>
<script>
window.onload = function() {
var div = document.getElementById("boxer"); //получаю блок по id
div.onmouseover = function(){ // при наведении....
animate({ //анимировать ширину
duration: 1000,
delta: makeEaseOut(quad),
step: function(delta) {
div.style.width = delta*(150-100)+100+"px";
}
})
};
div.onmouseout = function(){ // при отводе мыши....
animate({ //анимированно вернуть ширину
duration: 1000,
delta: makeEaseOut(quad),
step: function(delta) {
div.style.width = delta*(100-150)+150+"px";
}
})
};
}
</script>
</head>
<body>
<div style="background: grey; width:100px; height:100px;" id="boxer"></div>
</body>
</html>
что в animate.js? (взял от сюда:
http://learn.javascript.ru/js-animation)
function animate(opts) {
var start = new Date;
var delta = opts.delta || linear;
var timer = setInterval(function() {
var progress = (new Date - start) / opts.duration;
if (progress > 1) progress = 1;
opts.step( delta(progress) );
if (progress == 1) {
clearInterval(timer);
opts.complete && opts.complete();
}
}, opts.delay || 20);
return timer;
}
// ------------------ Delta ------------------
function linear(progress) {
return progress
}
function quad(progress) {
return Math.pow(progress, 2)
}
function makeEaseOut(delta) {
return function(progress) {
return 1 - delta(1 - progress)
}
}
проблема такова... когда навожу мышкой на блок, и сразу отвожу... начинается дёрганье блока.
я понимаю что это изза того что блок анимированно увеличивается... а уже запущена функция плавного уменьшения.
но я никак не могу додуматься как мне остановить прошлую анимацию перед запуском новой...
или что нужно сделать, чтобы дёрганья небыло, и сразу анимированно возвращались пропорции
что подскажете? (желательно с примером)