Javascript-форум (https://javascript.ru/forum/)
-   Элементы интерфейса (https://javascript.ru/forum/dom-window/)
-   -   Повторный запуск анимации при нажатии (https://javascript.ru/forum/dom-window/50994-povtornyjj-zapusk-animacii-pri-nazhatii.html)

Levitan 20.10.2014 13:21

Повторный запуск анимации при нажатии
 
Добрый день, Уважаемые специалисты.
Подскажите, как реализовать такого рода действие.
На сайте расположены элементы через Canvas

При загрузке страницы происходит движение квадратов по оси, при наведении на квадраты они увеличивают.
Как реализовать повторный запуск, вращение, либо увеличение всех элементов при нажатии на увеличительное стекло, на рисунке.
Заранее спасибо!

Levitan 21.10.2014 12:52

На других ссылках есть подобные события, скопировал код и подставил под свою ссылку.
<div class="col-sm-4">
							<a class="a_example a1 a1_home a_opacity" href="#">1</a>
							<p><b>Посмотрите</b> примеры  и <b>выберете</b> подходящий</p>
						</div>

$('.a_example').on('click', function() {
        setTimeout(function(){hexagon1_4.tween.reverse();}, 200);
		setTimeout(function(){tween2.reverse();}, 100);
		setTimeout(function(){tween3.reverse();}, 1);
        opa1.stop(); opa2.stop(); opa3.stop(); opa4.stop();
		hexagon2_4_1.setOpacity(0);
		hexagon3_4_1.setOpacity(0);
		hexagon3_4_2.setOpacity(0);
		hexagon1_4_1.setOpacity(0);
		
    });


Но не работает, подскажите, где я ошибся?
Заранее спасибо!

Levitan 22.10.2014 10:29

Цитата:

Сообщение от Levitan (Сообщение 336741)
На других ссылках есть подобные события, скопировал код и подставил под свою ссылку.
<div class="col-sm-4">
							<a class="a_example a1 a1_home a_opacity" href="#">1</a>
							<p><b>Посмотрите</b> примеры  и <b>выберете</b> подходящий</p>
						</div>

$('.a_example').on('click', function() {
        setTimeout(function(){hexagon1_4.tween.reverse();}, 200);
		setTimeout(function(){tween2.reverse();}, 100);
		setTimeout(function(){tween3.reverse();}, 1);
        opa1.stop(); opa2.stop(); opa3.stop(); opa4.stop();
		hexagon2_4_1.setOpacity(0);
		hexagon3_4_1.setOpacity(0);
		hexagon3_4_2.setOpacity(0);
		hexagon1_4_1.setOpacity(0);
		
    });


Но не работает, подскажите, где я ошибся?
Заранее спасибо!

Это и есть ответ.

kostyanet 22.10.2014 11:14

Форум помогает даже когда не помогает. Написал текстом и понял где ответ.


Часовой пояс GMT +3, время: 08:06.