0

Привет.

Вопрос по джейквери. Анимация.Если взять чистый джаваскрипт, то я могу взять, например, объект div#red "в руки" и запустить, например, через setInterval() изменение его стиля CSS, например, left и right (определяют координаты) через функцию move(). ПАРАЛЛЕЛЬНО я могу взять и запустить через тот же setInterval() изменение стиля CSS объекта div#red, например, font-size (определяет размер текста) через функцию changeFont(). Главное в мысли то, что эти две анимации-функции ОТРАБАТЫВАЮТ ПАРАЛЛЕЛЬНО - объект div#red движется + меняется при этом размер текста в нем. В приведенном мной примере функции move() и changeFont() как бы "шагают параллельно", а не ждут завершения друг-друга. Если бы в чистом джейквери я бы захотел выполнить некоторую функцию-анимацию 2 ПОСЛЕ того, как отработает полностью некоторая функция анимация 1, я бы в функции-анимации 1 поставил хитрое условие запуска функции-анимации 2("когда это ПОСЛЕДНИЙ запуск функции-анимации 1, то запусти функцию-анимацию 2, а она уже сама себя будет перезапускать").

Теперь возьмем джейквери. Тут есть понятие "ОЧЕРЕДЬ функций при анимации". введите сюда описание изображения

Применительно к этому скрипту - покажется алерт, потом выполнится анимация текста, потом выполнится анимация левого марджина, потом выполнится анимация верхнего марджина, потом анимация текста, потом выполнится анимация левого марджина, потом - правого марджина. Главное в этой мысли то, что ФУНКЦИИ-ФАНИМАЦИИ ОТРАБАТЫВАЮТ ДРУГ ЗА ДРУГОМ, а не сразу все параллельно. Вся анимация в данном примере займет 6 секунд, а не 1 секунду.

Вопрос - я хочу выполнить анимации-функции параллельно, как такое сделать с помощью средств джейквери?

5
  • Бред скажу, но... Может задать все конечные точки в одном объекте?
    – user207618
    13 окт 2016 в 16:15
  • И да, в JS нет параллельности :)
    – user207618
    13 окт 2016 в 16:16
  • не понимаю, что значит "задать все конечные точки в одном объекте"
    – Dimon
    13 окт 2016 в 16:16
  • .animate({fontSize: '1em', marginTop: '0', marginLeft: '0'}, 1000) - выполняем всё за одну секунду.
    – user207618
    13 окт 2016 в 16:17
  • .animate({fontSize: '1em', marginTop: '0', marginLeft: '0'}, 1000) - но этот скрипт не разнесешь по разным функциям, например, по move() и changeFont()
    – Dimon
    13 окт 2016 в 16:22

1 ответ 1

3

Как оказалось, animate создаёт очередь. Глупо на мой взгляд, но не мне судить.
Главное что очередь можно выключить, установив в аргументе длительности ключ queue в положение false:

function move(){
  $('#test').animate({
    marginTop: '100px'
  }, {duration: 1000, queue: false});
}

function run(){
  $('#test').animate({
    fontSize: '2em'
  }, {duration: 1000, queue: false});
}

move();
run();
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id='test'>Let's rock!</div>

P. S. Автор, пишите, пожалуйста внятнее.
Текст ВОТ ТАКИМИ БУКВАМИ только отталкивает от и так довольно сумбурного повествования.
И код не в скриншотах, пожалуйста.

3
  • я код из видеоурока выдрал). спасибо за ответ, оценил
    – Dimon
    13 окт 2016 в 16:56
  • хороший пример. мне тоже нравится рок
    – Dimon
    13 окт 2016 в 17:02
  • 1
    @Dimon, А кому не нравится? :) We will rock you, friend!
    – user207618
    13 окт 2016 в 17:03

Ваш ответ

Нажимая на кнопку «Отправить ответ», вы соглашаетесь с нашими условиями использования и подтверждаете, что прочитали и поняли наши политику конфиденциальности и нормы поведения.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.