Не работает delay после animation
Доброго времени суток. Ребята, помогите, пожалуйста. Делаю эффект загрузки. Выглядеть он должен так:
Строка. Из-за левого края вылетают точки (6 штук) по очереди друг за дружкой и останавливаются по центру(до того момента пока последняя не догонит остальных), а после вылетают за правый край, также, по очереди, но быстро. То бишь есть три позиции: ......| ...... |...... за экраном в центре за экраном Но почему то они вылетают сразу все вместе... Подскажите, почему, пожалуйста. <p id="dots"> <span id="1">•</span> <span id="2">•</span> <span id="3">•</span> <span id="4">•</span> <span id="5">•</span> <span id="6">•</span> </p> <style> #dots { overflow:hidden; text-align: center; } #dots span { position: relative; left: -100%; } </style> for(var i=6;i>=1;i--){ $('#dots>#'+i).animate({left:i/3+'%'},500,'easeOutQuart').delay(500); } Пробовал также setTimeOut. Тоже самое. Может это быть из-за того. что данный js-код у меня выполняется как callback/complete функция ? Жду, заранее благодарю. |
delay перед animate поставь
|
Цитата:
<!DOCTYPE HTML> <html> <head> <title>Untitled</title> <meta charset="utf-8"> <style> body{ background: #0000FF } #dots { overflow:hidden; text-align: center; } #dots span { position: relative; left:-100%; margin: -50% auto; color: #FFFF00; border-radius:50%; font-size: 24px; } </style> <script type="text/javascript" src="http://yandex.st/jquery/1.10.2/jquery.min.js"></script> <script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script> </head> <body> <p id="dots"> <span id="1">•</span> <span id="2">•</span> <span id="3">•</span> <span id="4">•</span> <span id="5">•</span> <span id="6">•</span> </p> <script> function go(left, time, complete) { for (var i = 6; i > 0; i--) $("#dots>#" + i).delay(time * (6 - i)).animate({ "left": left }, { easing: left == "0%" ? "easeOutQuart" : "easeInQuart", duration: time * 3 }); complete && window.setTimeout(complete, time * 9) } function one() { go("0%", 500, function () { two() }); } function two() { go("100%", 500, function () { three() }); } function three() { $('#dots span').css({left:'-100%'}); one() } one() </script> </body> </html> |
Почему то не работает delay если перед animation ставить. Только для первой точки. Сейчас попробую ваш код. Большое Вам спасибо.
|
Часовой пояс GMT +3, время: 10:07. |