[ZloiZmei]

Добрый день!

Столкнулся со следующей задачей - сделать анимацию, что бы объект (кораблик) выплывал с одной стороны экрана, заплывал за другую сторону, там разворачивался и плыл обратно.

Написал такую функцию:

<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>

Всё работает, за исключением того, что корабль разворачивается через раз - периодически плывет задним ходом.
Мне кажется, я уже все варианты расположения функций перепробовал - проблема остается. Иногда появляются новые...

Может кто-то сможет с этим справиться?