Как запустить две анимации jQuery одновременно?


211

Можно ли запустить две анимации на двух разных элементах одновременно? Мне нужен противоположный этому вопросу анимации очереди Jquery .

Мне нужно сделать что-то вроде этого ...

$('#first').animate({ width: 200 }, 200);
$('#second').animate({ width: 600 }, 200);

но запустить эти два одновременно. Единственное, о чем я мог подумать, это использовать setTimeoutодин раз для каждой анимации, но я не думаю, что это лучшее решение.


Хм ... ты пробовал это? Если вы используете точный код, который у вас есть, насколько я понимаю, как animate()они работают, они должны работать одновременно.
хаос

Здесь мы идем - jsbin.com/axata . Добавить / изменить, чтобы увидеть код
Russ Cam

У меня есть реальная проблема при анимации различных свойств CSS. Этот вопрос выглядит старым, и я поставил его в JSFiddle, кажется, оба подхода работают. Это все еще актуально? jsfiddle.net/AVsFe
valk

3
В текущем jquery, и, как я полагаю, начиная с jQuery 1.4, вышеприведенный код выполняет анимацию обоих одновременно, поскольку очереди fx присоединяются к элементу, для которого вы вызываете .animate (), а не к глобальной очереди.
Крис Москини

Выше jsbin мертв. jsfiddle из того же, что работает: jsfiddle.net/b9chris/a8pwbhx1
Крис Москини

Ответы:


418

Да, есть!

$(function () {
    $("#first").animate({
       width: '200px'
    }, { duration: 200, queue: false });

    $("#second").animate({
       width: '600px'
    }, { duration: 200, queue: false });
});

15
Спасибо за это, не знал об этой queueпеременной!
Дотти

4
Могу я спросить, какова цель передачи функции в jQuery?
плов

13
@pilau Будет выполнено, когда документ будет готов. Это сокращение для $ (document) .ready (function () {}); и позволяет вам поместить свой код JavaScript перед определением элемента.
Рафаэль Мишель

1
да, вы можете установить для очереди значение true / false или задать для нее строку (имя-очереди) таким образом, обе анимации используют один и тот же таймер ...
AlexK

3
Как бы вы добавили onComplete к этому?
jmchauv

19

Это будет работать одновременно, да. Что делать, если вы хотите запустить две анимации на одном элементе одновременно?

$(function () {
    $('#first').animate({ width: '200px' }, 200);
    $('#first').animate({ marginTop: '50px' }, 200);
});

Это заканчивается очередями анимации. чтобы запустить их одновременно, вы должны использовать только одну строку.

$(function () {
    $('#first').animate({ width: '200px', marginTop:'50px' }, 200);
});

Есть ли другой способ запустить две разные анимации на одном элементе одновременно?


9

Я считаю, что нашел решение в документации по jQuery:

Анимирует весь абзац до левого стиля 50 и непрозрачности 1 (непрозрачный, видимый), завершая анимацию в течение 500 миллисекунд. Он также сделает это за пределами очереди, то есть автоматически запустится, не дожидаясь своей очереди .

$( "p" ).animate({
  left: "50px", opacity: 1
}, { duration: 500, queue: false }); 

просто добавить: queue: false.


1
Как интегрировать полную функцию на этом? : s
Brainfeeder

8

Если вы запустите вышеописанное, как они есть, они будут работать одновременно.

Вот некоторый тестовый код:

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
<script>
$(function () {
    $('#first').animate({ width: 200 }, 200);
    $('#second').animate({ width: 600 }, 200);
});
</script>
<div id="first" style="border:1px solid black; height:50px; width:50px"></div>
<div id="second" style="border:1px solid black; height:50px; width:50px"></div>

3

Хотя верно то, что последовательные вызовы animate создают видимость, которую они выполняют одновременно, основная истина заключается в том, что они представляют собой отдельные анимации, работающие очень близко к параллельной.

Чтобы анимации действительно запускались одновременно, используйте:

$(function() {
    $('#first').animate({..., queue: 'my-animation'});
    $('#second').animate({..., queue: 'my-animation'}).dequeue('my-animation');
});

Дальнейшие анимации могут быть добавлены в очередь «my-animation», и все они могут быть инициированы при условии их последней очереди анимации.

Ура, Энтони


2

Посмотрите этот блестящий пост в блоге об анимации значений в объектах ... затем вы можете использовать значения для анимации всего, что вам нравится, на 100% одновременно!

http://www.josscrowcroft.com/2011/code/jquery-animate-increment-decrement-numeric-text-elements-value/

Я использовал это так, чтобы скользить в / из:

        slide : function(id, prop, from, to) {
            if (from < to) {
                // Sliding out
                var fromvals = { add: from, subtract: 0 };
                var tovals = { add: to, subtract: 0 };
            } else {
                // Sliding back in
                var fromvals = { add: from, subtract: to };
                var tovals = { add: from, subtract: from };
            }

            $(fromvals).animate(tovals, {
                duration: 200,
                easing: 'swing', // can be anything
                step: function () { // called on every step
                    // Slide using the entire -ms-grid-columns setting
                    $(id).css(prop, (this.add - this.subtract) + 'px 1.5fr 0.3fr 8fr 3fr 5fr 0.5fr');
                }
            });
        }

1
Мертвая ссылка, найдена на web.archive.org/web/20150101065437/http://www.josscrowcroft.com/…
PhiLho

0

Размещая мой ответ, чтобы помочь кому-то, ответ с самым высоким рейтингом не решил мою проблему.

Когда я реализовал следующее [из верхнего ответа], моя анимация вертикальной прокрутки просто дрожала взад-вперед:

$(function () {
 $("#first").animate({
   width: '200px'
}, { duration: 200, queue: false });

$("#second").animate({
   width: '600px'
}, { duration: 200, queue: false });
});

Я сослался на: W3 Schools Set Interval, и он решил мою проблему, а именно раздел «Синтаксис»:

setInterval (функция, миллисекунды, param1, param2, ...)

Наличие у моих параметров формы { duration: 200, queue: false }принудительной длительности ноль, и это только смотрело на параметры для руководства.

Длинный и короткий, вот мой код, если вы хотите понять, почему он работает, прочитайте ссылку или проанализируйте интервал ожидаемых параметров:

var $scrollDiv = '#mytestdiv';
var $scrollSpeed = 1000;
var $interval = 800;

function configureRepeats() {
   window.setInterval(function () {
       autoScroll($scrollDiv, $scrollSpeed);
   }, $interval, { queue: false });
};

Где AutoScroll это:

    $($scrollDiv).animate({
        scrollTop: $($scrollDiv).get(0).scrollHeight
    }, { duration: $scrollSpeed });

    //Scroll to top immediately 
    $($scrollDiv).animate({
        scrollTop: 0
    }, 0);

Удачного кодирования!

Используя наш сайт, вы подтверждаете, что прочитали и поняли нашу Политику в отношении файлов cookie и Политику конфиденциальности.
Licensed under cc by-sa 3.0 with attribution required.