Форум

Synov_son · #1 (**permalink**) 28.01.2014, 07:20

Доброго времени суток. Ребята, помогите, пожалуйста. Делаю эффект загрузки. Выглядеть он должен так:
Строка. Из-за левого края вылетают точки (6 штук) по очереди друг за дружкой и останавливаются по центру(до того момента пока последняя не догонит остальных), а после вылетают за правый край, также, по очереди, но быстро. То бишь есть три позиции:
......| ...... |......
за экраном в центре за экраном
Но почему то они вылетают сразу все вместе... Подскажите, почему, пожалуйста.

<p id="dots">
        	<span id="1">&bull;</span>
            <span id="2">&bull;</span>
            <span id="3">&bull;</span>
            <span id="4">&bull;</span>
            <span id="5">&bull;</span>
            <span id="6">&bull;</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 функция ?
Жду, заранее благодарю.

melky · #2 (**permalink**) 28.01.2014, 11:52

delay перед animate поставь

рони · #3 (**permalink**) 28.01.2014, 12:47

Сообщение от melky

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">&bull;</span>
            <span id="2">&bull;</span>
            <span id="3">&bull;</span>
            <span id="4">&bull;</span>
            <span id="5">&bull;</span>
            <span id="6">&bull;</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>

Synov_son · #4 (**permalink**) 28.01.2014, 16:21

Почему то не работает delay если перед animation ставить. Только для первой точки. Сейчас попробую ваш код. Большое Вам спасибо.

Форум

Справочник

Discord чат

Курсы javascript