<!DOCTYPE html>
<html>
<head>
<style>
.example_path {background:#b3b3b3;width:100px;height:100px;;}
</style>
<script>
function animate(opts) {
var start = new Date; // сохранить время начала
var timer = setInterval(function() {
// вычислить сколько времени прошло
var progress = (new Date - start) / opts.duration;
if (progress > 1) progress = 1;
// отрисовать анимацию
opts.step(progress);
if (progress == 1) clearInterval(timer); // конец :)
}, opts.delay || 10); // по умолчанию кадр каждые 10мс
}
function stretch(elem) {
to=0.5;
animate({
duration: 1000, // время на анимацию 1000 мс
step: function(progress) {
elem.style.opacity = to*progress;
}
});
}
</script>
</head>
<body>
<div onclick="stretch(this)" class="example_path">
</div>
</body>
</html>
Как видите при клике на блок, изменяется прозрачность с 0 до 0.5, а как сделать чтобы с 1.0 изменялось до 0.5 ?