Ожидание завершения анимации

@inviter19 · 16.04.2013, 14:13. **Показов** 9375. **Ответов** 8

Студворк — интернет-сервис помощи студентам

Есть вот такая страничка:
Картинка.gif
^{/вставка через аттач корябит изображение, поэтому прилагаю ссылку "как есть"/}

Требуется создать проверку при нажатии на кнопку типа "Если предыдущая анимация завершена -> анимировать, иначе -> break". Время анимации известно - 2sec.

Код тут:

Кликните здесь для просмотра всего текста

HTML5
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
<!DOCTYPE HTML>
<html>  
  <head>    
    <meta http-equiv="content-type" content="text/html; charset=UTF-8">    
    <meta charset="utf-8">    
    <title>Барсириэль был тут :)     
    </title>       
    <!--FONTS-->     
    <link href='http://fonts.googleapis.com/css?family=Lobster&subset=latin,cyrillic' 
rel='stylesheet' type='text/css'>    
    <link href='http://fonts.googleapis.com/css?family=Lobster+Two' rel='stylesheet'
 type='text/css'>    
    <!--CSS-->    
    <link rel="stylesheet" type="text/css" href="style.css"> 
    <!--scripts-->
<script>
//CHECK-->
function check(obj){
var buttons = document.getElementsByTagName("button");
for (i=0; i<buttons.length; i++) {
  if (obj.id==buttons[i].id) {
var butId = obj.id;
return butId;
    break;  
  }
}
}
 
//ANIMATION OUT-->
function aniout(butId){
if (document.getElementsByName('div'+butId)[0].className == 'aniin') {}
else {document.getElementsByClassName('aniin')[0].className = 'aniout';
     setTimeout(function() { document.getElementsByClassName('aniout')[0].className = 'hidden'; }, 1000)}     
}     
 
 
//ANIMATION IN-->
function aniin(butId){
setTimeout(function() {document.getElementsByName('div'+butId)[0].className = 'aniin';}, 500)
}
</script>
 
  </head>  
  <body>
  <div style="display: table; position: relative; margin-top: 8%;">
      <button id="but1" type="button" onclick="var butId=check(this);aniout(butId);
aniin(butId);">Кнопка 1</button>
      <button id="but2" type="button" onclick="var butId=check(this);aniout(butId);
aniin(butId);">Кнопка 2</button>
      <button id="but3" type="button" onclick="var butId=check(this);aniout(butId);
aniin(butId);">Кнопка 3</button>    
  </div>
    <div id="border-out">         
      <div name="divbut1" class="aniin"> 
         <h1>Hello, %Username1%           
          <br/> :D            
          <br/> Как дела? *_* 
         </h1>      
      </div>
      <div name="divbut2" class="hidden">
         <h1>Hello, %Username2%           
          <br/> :D            
          <br/> Ты ещё тут? -_-
         </h1>      
      </div>  
      <div name="divbut3" class="hidden">
         <h1>Hello, %Username3%           
          <br/> :D            
          <br/> Я ушёл >.<
         </h1>      
      </div>  
    </div>          
  </body>
</html>

Спасибо

Vovan-VE · 16.04.2013, 15:54

Вроде, браузеры вольны запускать анимацию GIF'ов в любое время. Т.о. о состоянии анимации GIF'ов вообще ничего не известно, насколько я знаю.

@inviter19 · 16.04.2013, 15:56 **[ТС]**

Gif это просто чтобы показать анимацию на сайте. Сама анимация сделана через css3 свойства.
Вы код посмотрели?) Там у анимируемых блоков просто меняются классы.

@xenohunter · 16.04.2013, 16:07

inviter19, если анимацию запускать через JS, то можно отслеживать её состояние с помощью setTimeout. К примеру, так:

JavaScript
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
var animationIsActive = false;
 
function activate() {
 
    if (animationIsActive === false) {
 
        // включаем анимацию
        animationIsActive = true;
 
        setTimeout(function () {
            animationIsActive = false;
        }, 2000);
 
    }
    
}

@inviter19 · 16.04.2013, 16:12 **[ТС]**

Да, только проблема в том, что этот способ не совсем подходит. Приведу пример - при нажатии на кнопку "1" запускается анимация. В середине анимации(т.е. через одну секунду) мы нажимаем на кнопку "2", на которую навешана своя анимация(та же самая, что и у кнопки "1"). Проверка не выполнится как надо.

@xenohunter · 16.04.2013, 16:17

inviter19, поправил код немного: setTimeout тоже должен быть вложен в if, иначе каждый клик будет вызывать этот setTimeout.

Добавлено через 3 минуты
inviter19, переменную animationIsActive сделайте общей для всей анимации.

@inviter19 · 16.04.2013, 16:25 **[ТС]**

xenohunter, не совсем понял Вашу мысль. Можно, пожалуйста, подробнее. Вот, например, две кнопки с анимацией:

HTML5
1
2
<button class="hidden" id="1" onclick="anim();">Button 1</button>
<button class="hidden" id="2" onclick="anim();">Button 2</button>

Вот, например, скрипт анимации:

JavaScript
1
2
3
4
function anim(){
var butt=document.getElementByTagName("butt");
butt.className = 'animation';
}

^{/вообще, такой скрипт будет менять классы у обеих кнопок сразу, но не в этом суть. В сообщении топика расписано как надо/}

@xenohunter · 16.04.2013, 16:35

inviter19, а ту функцию, что я написал, вы же не учли. Для удобства можно передавать id кнопки в функцию. Смотрите:

HTML5
1
2
<button class="hidden" id="button1" onclick="animate(this.id);">Button 1</button>
<button class="hidden" id="button2" onclick="animate(this.id);">Button 2</button>

JavaScript
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
var animationIsActive = false;
 
function animate(id) {
 
    if (animationIsActive === false) {
    
        var button = document.getElementById(id);
        button.className = 'animation';
 
        animationIsActive = true;
    
        setTimeout(function () {
            animationIsActive = false;
        }, 2000);
    
    }
    
}

А getElementByTagName правильно будет вот так: getElementsByTagName.

@inviter19 · 16.04.2013, 16:38 **[ТС]**

Да, точно! Там же массив

Новые блоги и статьи Все статьи Все блоги /
Оттенки серого Argus19 18.03.2026 Оттенки серого Нашёл в интернете 3 прекрасных модуля: Модуль класса открытия диалога открытия/ сохранения файла на Win32 API; Модуль класса быстрого перекодирования цветного изображения в оттенки. . .	SDL3 для Desktop (MinGW): Рисуем цветные прямоугольники с помощью рисовальщика SDL3 на Си и C++ 8Observer8 17.03.2026 Содержание блога Финальные проекты на Си и на C++: finish-rectangles-sdl3-c. zip finish-rectangles-sdl3-cpp. zip	Символические и жёсткие ссылки в Linux. algri14 15.03.2026 Существует два типа ссылок — символические и жёсткие. Ссылка в Linux — это запись в каталоге, которая может указывать либо на inode «файла-ИСТОЧНИКА», тогда это будет «жёсткая ссылка» (hard link),. . .	[Owen Logic] Поддержание уровня воды в резервуаре количеством включённых насосов: моделирование и выбор регулятора ФедосеевПавел 14.03.2026 Поддержание уровня воды в резервуаре количеством включённых насосов: моделирование и выбор регулятора ВВЕДЕНИЕ Выполняя задание на управление насосной группой заполнения резервуара,. . .
делаю науч статью по влиянию грибов на сукцессию anaschu 13.03.2026 прикрепляю статью	SDL3 для Desktop (MinGW): Создаём пустое окно с нуля для 2D-графики на SDL3, Си и C++ 8Observer8 10.03.2026 Содержание блога Финальные проекты на Си и на C++: hello-sdl3-c. zip hello-sdl3-cpp. zip Результат:	Установка CMake и MinGW 13.1 для сборки С и C++ приложений из консоли и из Qt Creator в EXE 8Observer8 10.03.2026 Содержание блога MinGW - это коллекция инструментов для сборки приложений в EXE. CMake - это система сборки приложений. Здесь описаны базовые шаги для старта программирования с помощью CMake и. . .	Как дизайн сайта влияет на конверсию: 7 решений, которые реально повышают заявки Neotwalker 08.03.2026 Многие до сих пор воспринимают дизайн сайта как “красивую оболочку”. На практике всё иначе: дизайн напрямую влияет на то, оставит человек заявку или уйдёт через несколько секунд. Даже если у вас. . .

Vovan-VE 13210 / 6599 / 1041 Регистрация: 10.01.2008 Сообщений: 15,069
	16.04.2013, 15:54
	Вроде, браузеры вольны запускать анимацию GIF'ов в любое время. Т.о. о состоянии анимации GIF'ов вообще ничего не известно, насколько я знаю. 0

@inviter19 Заблокирован
	16.04.2013, 15:56 [ТС]
	Gif это просто чтобы показать анимацию на сайте. Сама анимация сделана через css3 свойства. Вы код посмотрели?) Там у анимируемых блоков просто меняются классы. 0

@inviter19 Заблокирован
	16.04.2013, 16:12 [ТС]
	Да, только проблема в том, что этот способ не совсем подходит. Приведу пример - при нажатии на кнопку "1" запускается анимация. В середине анимации(т.е. через одну секунду) мы нажимаем на кнопку "2", на которую навешана своя анимация(та же самая, что и у кнопки "1"). Проверка не выполнится как надо. 0

@xenohunter Дзен-программист 122 / 87 / 16 Регистрация: 10.04.2013 Сообщений: 253
	16.04.2013, 16:17
	inviter19, поправил код немного: setTimeout тоже должен быть вложен в if, иначе каждый клик будет вызывать этот setTimeout. Добавлено через 3 минуты inviter19, переменную animationIsActive сделайте общей для всей анимации. 0

@inviter19 Заблокирован
	16.04.2013, 16:38 [ТС]
	Да, точно! Там же массив 0