привет снова... решил проблему таким способом:
<html>
<head>
<script>
window.onload = function() {
globalTimer = 0;
var div = document.getElementById("boxer");
div.onmouseover = function(){
clearInterval(globalTimer),
animate({
duration: 1000,
delta: makeEaseOut(quad),
step: function(delta) {
div.style.width = delta*(150-100)+100+"px";
}
})
};
div.onmouseout = function(){
clearInterval(globalTimer),
animate({
duration: 1000,
delta: makeEaseOut(quad),
step: function(delta) {
div.style.width = delta*(100-150)+150+"px";
}
})
};
var diva = document.getElementById("boxe");
diva.onmouseover = function(){
clearInterval(globalTimer),
animate({
duration: 1000,
delta: makeEaseOut(quad),
step: function(delta) {
diva.style.width = delta*(170-120)+120+"px";
}
})
};
diva.onmouseout = function(){
clearInterval(globalTimer),
animate({
duration: 1000,
delta: makeEaseOut(quad),
step: function(delta) {
diva.style.width = delta*(120-170)+170+"px";
}
})
};
}
function animate(opts) {
var start = new Date;
var delta = opts.delta || linear;
globalTimer = 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 elastic(progress) {
return Math.pow(2, 10 * (progress-1)) * Math.cos(20*Math.PI*1.5/3*progress)
}
function linear(progress) {
return progress
}
function quad(progress) {
return Math.pow(progress, 2)
}
function quint(progress) {
return Math.pow(progress, 5)
}
function makeEaseInOut(delta) {
return function(progress) {
if (progress < .5)
return delta(2*progress) / 2
else
return (2 - delta(2*(1-progress))) / 2
}
}
function makeEaseOut(delta) {
return function(progress) {
return 1 - delta(1 - progress)
}
}
</script>
</head>
<body>
<div style="background: grey; width:100px; height:100px;" id="boxer"></div><br>
<div style="background: green; width:120px; height:120px;" id="boxe"></div>
</body>
</html>
но столкнулся с новой проблемой...
теперь когда сразу навожу на соседний блок, прошлый не возвращается к старым размерам.
что делать?