Плавное появление элемента.
Привет! Помогите пжлз с задачкой.
Дано - 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);
Не могу догнать где делать интервал и как. Спасибо всем за помощь! |
anabenne,
может не дробить на куски а сделать рабочий макет [HTML run height=300][/HTML] |
Цитата:
|
Цитата:
1й .. 2й и тд |
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>
|
Лучше использовать не setInterval, а requestAnimationFrame.
вот тут всё хорошо расписано с примерами: https://learn.javascript.ru/js-animation |
Это обязательно силами js делать? Тут просто css animation сам собой напрашивается
|
| Часовой пояс GMT +3, время: 10:07. |