max0n,
<html>
<head>
<script>
window.onload = function() {
var div = document.getElementById("boxer");
div.onmouseover = function(){
animate({
el : div,
duration: 1000,
delta: makeEaseOut(quad),
step: function(delta,width) {
div.style.width = delta*(150-width)+width+"px";
}
})
};
div.onmouseout = function(){
animate({
el : div,
duration: 1000,
delta: makeEaseOut(quad),
step: function(delta,width) {
div.style.width = delta*(100-width)+width+"px";
}
})
};
var diva = document.getElementById("boxe");
diva.onmouseover = function(){
animate({
el : diva,
duration: 1000,
delta: makeEaseOut(quad),
step: function(delta,width) {
diva.style.width = delta*(170-width)+width+"px";
}
})
};
diva.onmouseout = function(){
animate({
el : diva,
duration: 1000,
delta: makeEaseOut(quad),
step: function(delta,width) {
diva.style.width = delta*(120-width)+width+"px";
}
})
};
}
function animate(opts) {
clearInterval(opts.el.timer);
var start = new Date;
var delta = opts.delta || linear;
var width = parseFloat(opts.el.style.width);
opts.el.timer = setInterval(function() {
var progress = (new Date - start) / opts.duration;
if (progress > 1) progress = 1;
opts.step( delta(progress),width );
if (progress == 1) {
clearInterval(opts.el.timer);
opts.complete && opts.complete();
}
}, opts.delay || 20);
}
// ------------------ 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>
<div style="background: green; width:120px; height:120px;" id="boxe"></div>
</body>
</html>