Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 21.07.2016, 14:11
Новичок на форуме
Отправить личное сообщение для anabenne Посмотреть профиль Найти все сообщения от anabenne
 
Регистрация: 21.07.2016
Сообщений: 2

Плавное появление элемента.
Привет! Помогите пжлз с задачкой.

Дано - 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);


Не могу догнать где делать интервал и как.
Спасибо всем за помощь!
Ответить с цитированием
  #2 (permalink)  
Старый 21.07.2016, 14:16
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,064

anabenne,
может не дробить на куски а сделать рабочий макет
[HTML run height=300][/HTML]
Ответить с цитированием
  #3 (permalink)  
Старый 21.07.2016, 14:21
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,064

Сообщение от anabenne
Появился 3й (плавно с прозрачностью от 0 до 100%, и с размера от 0 до 100%) - Замер
дальше что?
Ответить с цитированием
  #4 (permalink)  
Старый 21.07.2016, 15:13
Новичок на форуме
Отправить личное сообщение для anabenne Посмотреть профиль Найти все сообщения от anabenne
 
Регистрация: 21.07.2016
Сообщений: 2

Сообщение от рони Посмотреть сообщение
дальше что?
дальше точки одновременно исчезли и опять повторилось действие
1й .. 2й и тд
Ответить с цитированием
  #5 (permalink)  
Старый 21.07.2016, 15:27
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,064

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>
Ответить с цитированием
  #6 (permalink)  
Старый 25.07.2016, 12:06
Профессор
Отправить личное сообщение для Маэстро Посмотреть профиль Найти все сообщения от Маэстро
 
Регистрация: 02.07.2010
Сообщений: 642

Лучше использовать не setInterval, а requestAnimationFrame.
вот тут всё хорошо расписано с примерами: https://learn.javascript.ru/js-animation
Ответить с цитированием
  #7 (permalink)  
Старый 25.07.2016, 23:23
Профессор
Отправить личное сообщение для Царь Леонид Посмотреть профиль Найти все сообщения от Царь Леонид
 
Регистрация: 22.08.2013
Сообщений: 217

Это обязательно силами js делать? Тут просто css animation сам собой напрашивается
Ответить с цитированием
Ответ



Опции темы Искать в теме
Искать в теме:

Расширенный поиск


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
Плавное появление результата из get Jquery PonyS Общие вопросы Javascript 7 31.05.2016 18:13
Плавное появление картинок K_PECT Общие вопросы Javascript 4 24.03.2016 22:46
Плавное исчезновение и появление изображения Surlik jQuery 9 17.03.2012 14:27
Плавное исчезновение/появление элемента Dudo4nick jQuery 3 28.11.2011 13:51
Как сделать плавное появление ? saturn Элементы интерфейса 5 12.11.2011 03:16