1 Тема від Ярослав Востаннє редагувалося Ярослав (07.08.2014 18:22:07)

  • Ярослав
  • Гість

Тема: Анімація за допомогою функції setTimeout

Привіт!
Я глянув на метод .animate() в jQuery і мені захотілось зрозуміти суть - як саме створюється анімація в JavaScript.
Прочитавши про setTimeout http://javascript.ru/setTimeout, я спробував його використати за мануалом http://www.schillmania.com/content/proj … imation-1/, але у мене не все вийшло.
Мені вдалось збільшувати розмір блоку викликаючи функцію по кліку мишки. Тобто так:

<div id="block" class="block" onclick="wide();">

І кожен раз коли я клікав, то змінював css властивість width на декілька пікселів.

Теж саме я хотів зробити за допомогою setTimeout, однак у мене нічого не виходило. Робив так:

var block = document.getElementById("block");

function wide(){
  ...
    setTimeout(wide, 20);
}

У мене виникала така проблема: http://stackoverflow.com/questions/4120 … mmediately

Мені все ж таки вдалось використати цю функцію! Але тим не менш, можете пояснити чому якщо викликати її так:     setTimeout(wide(), 2000), то не відбудеться затримки в 2 секунди, а якщо wide приймає якісь параметри, то їх треба вказувати 3 і т. д. аргументами?

2 Відповідь від Ярослав Востаннє редагувалося Ярослав (07.08.2014 18:37:06)

  • Ярослав
  • Гість

Re: Анімація за допомогою функції setTimeout

Ось так вийшло:

<html>
  <head>
      <title></title>
      <style>
          .block{
              border: black solid thin;
          }
      </style>
  </head>
  <body>
    <div id="block" class="block" onclick="wide();">Привіт!</div>
    <script>
      var block = document.getElementById("block");
      block.style.width = 20 + "px";

      function wide(){
        var width;          

        width = parseInt(block.style.width);

        if(width < 500){
          width = width + 25;
          block.style.width = width + "px";
          setTimeout(wide, 20);
        }
      }
    </script>
  </body>
</html>