Вход

Просмотр полной версии : Плавное появление элемента.

anabenne
21.07.2016, 14:11
Привет! Помогите пжлз с задачкой.

Дано - 3 элемента, которые должны плавно появляться друг за другом с интервалом времени, замирать в конечной точке. И так бесконечно. Плюс изменяться в масштабе от мала до велика.

Например. Шкала времени.
Появился 1й (плавно с прозрачностью от 0 до 100%, и с размера от 0 до 100%) - Замер
...прошло секунда...
Появился 2й (плавно с прозрачностью от 0 до 100%, и с размера от 0 до 100%) - Замер
...прошло секунда...
Появился 3й (плавно с прозрачностью от 0 до 100%, и с размера от 0 до 100%) - Замер

Цикл повторился бесконечно раз.
Вот что я сам накодил ..
<div id="point1"></div>
<div id="point2"></div>
<div id="point3"></div>
#point1,#point2,#point3 {
width: 10px;
height: 10px;
position: absolute;
border-radius: 10px;
}
#point1 {
background-color: #222;
top: 1px;
left: 0px;
}
#point2 {
background-color: #111;
top: 1px;
left: 40px;
}
#point3 {
background-color: #555;
top: 1px;
left: 80px;
}
setTimeout(function run() {
$('#point1').fadeToggle();
setTimeout(run, 1000);
}, 1000);
setInterval(function run() {
$('#point1').delay(2000);
}, 1000);

setTimeout(function run1() {
$('#point2').fadeToggle();
setTimeout(run1, 1500);
}, 1000);
setInterval(function run1() {
$('#point2').delay(1500);
}, 1000);

setTimeout(function run2() {
$('#point3').fadeToggle();
setTimeout(run2, 2000);
}, 1000);
setInterval(function run2() {
$('#point3').delay(1000);
}, 1000);

Не могу догнать где делать интервал и как.
Спасибо всем за помощь!
рони
21.07.2016, 14:16
anabenne,
может не дробить на куски а сделать рабочий макет
рони
21.07.2016, 14:21
Появился 3й (плавно с прозрачностью от 0 до 100%, и с размера от 0 до 100%) - Замер
дальше что?
anabenne
21.07.2016, 15:13
дальше что?

дальше точки одновременно исчезли и опять повторилось действие
1й .. 2й и тд
рони
21.07.2016, 15:27
anabenne,
<!DOCTYPE html>

<html>
<head>
<title>Untitled</title>
<meta charset="utf-8">
<style type="text/css">
#point1,#point2,#point3 {
width: 10px;
height: 10px;
position: absolute;
border-radius: 10px;
}
#point1 {
background-color: #222;
top: 1px;
left: 0px;
}
#point2 {
background-color: #111;
top: 1px;
left: 40px;
}
#point3 {
background-color: #555;
top: 1px;
left: 80px;
}

</style>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script>
$(function() {
var item = $(".point"), indx = -1, len = item.length;
(function go()
{
indx = ++indx % len;
!indx && item.hide();
item.eq(indx).delay(1000).fadeToggle(1200, go)

}())
});
</script>
</head>

<body>

<div id="point1" class="point"></div>
<div id="point2" class="point"></div>
<div id="point3" class="point"></div>


</body>
</html>
Маэстро
25.07.2016, 12:06
Лучше использовать не setInterval, а requestAnimationFrame.
вот тут всё хорошо расписано с примерами: https://learn.javascript.ru/js-animation
Царь Леонид
25.07.2016, 23:23
Это обязательно силами js делать? Тут просто css animation сам собой напрашивается