Анимация в цикле с разворотом объекта
Добрый день!
Столкнулся со следующей задачей - сделать анимацию, что бы объект (кораблик) выплывал с одной стороны экрана, заплывал за другую сторону, там разворачивался и плыл обратно. Написал такую функцию:
<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, время: 21:40. |