Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 07.08.2018, 13:38
Кандидат Javascript-наук
Отправить личное сообщение для Начинающий-Js-кодер Посмотреть профиль Найти все сообщения от Начинающий-Js-кодер
 
Регистрация: 12.06.2016
Сообщений: 130

Зацикленная анимация
Здравствуйте. Как можно сделать анимацию, но чтобы она работала по циклу. Например изменяла отступ от 0 до 100 пикселей а потом обратно и так бесконечно раз. Но на js,а не css
Спасибо
Ответить с цитированием
  #2 (permalink)  
Старый 07.08.2018, 13:47
Профессор
Отправить личное сообщение для Nexus Посмотреть профиль Найти все сообщения от Nexus
 
Регистрация: 04.12.2012
Сообщений: 3,794

https://jsfiddle.net/7fpLo13u/
Ответить с цитированием
  #3 (permalink)  
Старый 07.08.2018, 16:38
Кандидат Javascript-наук
Отправить личное сообщение для Начинающий-Js-кодер Посмотреть профиль Найти все сообщения от Начинающий-Js-кодер
 
Регистрация: 12.06.2016
Сообщений: 130

То есть тут в замыкании функция,которая после выполнения коллбэком вызывает саму себя?
Ответить с цитированием
  #4 (permalink)  
Старый 07.08.2018, 16:39
Кандидат Javascript-наук
Отправить личное сообщение для Начинающий-Js-кодер Посмотреть профиль Найти все сообщения от Начинающий-Js-кодер
 
Регистрация: 12.06.2016
Сообщений: 130

На чистом js такое можно будет сотворить? или не выйдет?
Ответить с цитированием
  #5 (permalink)  
Старый 07.08.2018, 16:41
Профессор
Отправить личное сообщение для Nexus Посмотреть профиль Найти все сообщения от Nexus
 
Регистрация: 04.12.2012
Сообщений: 3,794

Сообщение от Начинающий-Js-кодер
То есть тут в замыкании функция,которая после выполнения коллбэком вызывает саму себя?
Типа того.

Сообщение от Начинающий-Js-кодер
На чистом js такое можно будет сотворить? или не выйдет?
Если jQuery на чистом js написан, значит подобное и без jq можно сделать.
Ответить с цитированием
  #6 (permalink)  
Старый 07.08.2018, 16:57
Профессор
Отправить личное сообщение для Dilettante_Pro Посмотреть профиль Найти все сообщения от Dilettante_Pro
 
Регистрация: 27.11.2015
Сообщений: 2,899

Сообщение от Начинающий-Js-кодер
На чистом js такое можно будет сотворить?
JS-Анимация
Ответить с цитированием
  #7 (permalink)  
Старый 07.08.2018, 17:22
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,121

туда сюда обратно
Начинающий-Js-кодер,
<!DOCTYPE HTML>

<html>

<head>
  <title>Untitled</title>
  <meta charset="utf-8">
  <style type="text/css">
   #block{
    position:absolute;
    top:0;
    left:0;
    width:20px;
    height:20px;
    background:#000;
}
  </style>
   <script>
      document.addEventListener('DOMContentLoaded', function() {
         var b = document.querySelector('#block'), m = 0, n = .5;
         function c()
         {
           m += n;
           if(m == 100 || m == 0) n = -n;
           b.style.marginLeft = m + 'px';
           requestAnimationFrame(c)
         }
         requestAnimationFrame(c);
       document.addEventListener('keydown', function(event) {
       if(event.key == 'Enter') alert(m);  });
        });
   </script>
</head>

<body>


<div id="block"></div>
</body>

</html>

Последний раз редактировалось рони, 07.08.2018 в 18:08.
Ответить с цитированием
  #8 (permalink)  
Старый 07.08.2018, 17:55
Кандидат Javascript-наук
Отправить личное сообщение для Начинающий-Js-кодер Посмотреть профиль Найти все сообщения от Начинающий-Js-кодер
 
Регистрация: 12.06.2016
Сообщений: 130

Спасибо.
Рони, а вам отдельное и большое-пребольшое.

Теперь хочу спросить-внешнее прерывание в эту функцию можно добавить?например,чтобы нажали клавишу enter и показало текущее значение m?
Ответить с цитированием
  #9 (permalink)  
Старый 07.08.2018, 18:01
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,121

Сообщение от Начинающий-Js-кодер
например,чтобы нажали клавишу enter и показало текущее значение m
в чём проблема?
Ответить с цитированием
  #10 (permalink)  
Старый 07.08.2018, 18:11
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,121

Сообщение от Начинающий-Js-кодер
нажали клавишу enter
смотрите пост №7 снова , курсор на поле примера, кликнуть в любом месте, потом нажать 'Enter'
Ответить с цитированием
Ответ



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

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


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
Как реализована анимация на сайте популярной игры? whoIam Общие вопросы Javascript 6 19.09.2016 09:45
CSS3 Анимация [Не срабатывает при переключении вкладки] Quasar[CY] (X)HTML/CSS 1 18.11.2015 20:43
Анимация после анимации Narahon Элементы интерфейса 12 02.04.2015 22:06
Анимация gif картинки при нажатии на ссылку ainur777 Общие вопросы Javascript 2 06.07.2014 16:23
Анимация. Помогите понять почему не работает. kadurban jQuery 4 08.07.2010 20:50