Анимация в цикле с разворотом объекта
Добрый день!
Столкнулся со следующей задачей - сделать анимацию, что бы объект (кораблик) выплывал с одной стороны экрана, заплывал за другую сторону, там разворачивался и плыл обратно. Написал такую функцию: <script> $(document).ready(function(){ function motion() { $('#ship').animate({ "right": '+=120%' }, 3600,'linear', function(){ $('#ship').toggleClass('ship2'); $('#ship').animate({ "right": '-=120%' }, 3600); $('#ship').toggleClass('ship1'); motion(); } ); } motion(); }); </script> Стиль и html: <style> div#ship { width: 180px; height: 60px; position: absolute; right: -200; top: 155; } div.ship1 { background: url(../images/ship.png) transparent no-repeat top left; } div.ship2 { background: url(../images/ship2.png) transparent no-repeat top left; } </style> <div id="ship" class="ship1"></div> Всё работает, за исключением того, что корабль разворачивается через раз - периодически плывет задним ходом. Мне кажется, я уже все варианты расположения функций перепробовал - проблема остается. Иногда появляются новые... Может кто-то сможет с этим справиться? |
$(document).ready(function(){ function motion() { $('#ship').removeClass('ship2').addClass('ship1').animate({ "right": '+=120%' }, 3600,'linear', function(){ $('#ship').removeClass('ship1').addClass('ship2').animate({ "right": '-=120%' }, 3600, motion); } ); } motion(); }); |
Работает! Благодарю!
|
Часовой пояс GMT +3, время: 20:20. |