Показать сообщение отдельно
  #1 (permalink)  
Старый 11.11.2012, 13:15
Профессор
Отправить личное сообщение для hoax Посмотреть профиль Найти все сообщения от hoax
 
Регистрация: 20.09.2012
Сообщений: 151

Изменяем opacity с помощью animate
<!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 ?
Ответить с цитированием