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

Question

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

можно ли одновременно запускать две анимации на двух разных элементах? Мне нужна противоположность этого вопроса jQuery и обслуживания анимация.

мне нужно сделать что-то подобное...

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

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

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

535 6

jQuery javascript animation

6 ответов:

Comments

Ничего не найдено.

Joshua · Accepted Answer · 2016-08-13 19:50:34

да есть!

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

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

Waseem · Accepted Answer · 2009-11-03 13:25:57

это будет работать одновременно да. что делать, если вы хотите запустить две анимации на одном элементе одновременно ?
$(function () {
    $('#first').animate({ width: '200px' }, 200);
    $('#first').animate({ marginTop: '50px' }, 200);
});
это заканчивается очередью анимации. чтобы запустить их одновременно можно использовать только одну строку.
$(function () {
    $('#first').animate({ width: '200px', marginTop:'50px' }, 200);
});
есть ли другой способ запустить две разные анимации на одном элементе одновременно ?

Andreas Grech · Accepted Answer · 2009-08-09 15:38:10

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

вот тестовый код:

<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>

user697709 · Accepted Answer · 2011-12-23 23:09:57

Я считаю, что нашел решение в документации jQuery:
анимация всего абзаца в левом стиле 50 и непрозрачность 1 (непрозрачный, видно), завершая анимацию в течение 500 миллисекунд. он также сделайте это вне очереди, то есть будет автоматически запускаться без ждем своей очереди.
$( "p" ).animate({
  left: "50px", opacity: 1
}, { duration: 500, queue: false }); 
просто добавить: queue: false.

Erik Schoel · Accepted Answer · 2012-08-17 02:19:26

см. это блестящее сообщение в блоге об анимации значений в объектах.. затем вы можете использовать значения для анимации все, что вам нравится, 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');
                }
            });
        }

Borgboy · Accepted Answer · 2017-02-12 01:01:56

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

чтобы обеспечить анимацию действительно работает в то же время использовать:
$(function() {
    $('#first').animate({..., queue: 'my-animation'});
    $('#second').animate({..., queue: 'my-animation'}).dequeue('my-animation');
});
дополнительные анимации могут быть добавлены в очередь "моя анимация", и все они могут быть инициированы при условии, что последняя анимация dequeue их.

Ура, Энтони