<html>
<body>
<head>
<style>
#time {background:blue;width:50px;height:50px;opacity:0.5}
</style>
</head>
<body>
<div onclick="move(this)" id="time">
</div>
<script>
function animate(opts) {
var start = new Date;
var timer = setInterval(function() {
var progress = (new Date - start) / opts.duration; // выясняем время
if (progress > 1) progress = 1;
if (progress == 1) {
clearInterval(timer);
opts.complete;
}
opts.step(opts.delta(progress));
}, 10)
return timer;
};
function move(el, delta) {
animate({
duration:1000,
delta:linear,
step:function(delta) {
el.style.opacity = Math.round(0.5 + (1.0 - 0.5)*delta);
}
})
}
function linear(progress) {
return progress;
}
</script>
</body>
</html>