Як запустити дві анімації 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змінну!
dotty

4
Чи можу я запитати, яка мета передачі функції jQuery?
pilau

13
@pilau Він буде виконаний, коли документ буде готовий. Це скорочення для $ (document) .ready (function () {}); і дозволяє вам поставити код javascript перед визначенням вашого елемента.
Рафаель Мішель

1
так, ви можете встановити чергу на true / false або надати їй рядок (ім'я черги) таким чином, обидві анімації використовують один і той же таймер ...
AlexK

3
Як би ви додали до цього оновлення?
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

Хоча це правда, що послідовні дзвінки на анімацію створюватимуть вигляд, який вони працюють одночасно, основна правда полягає в тому, що вони мають різні анімації, що працюють дуже близько до паралелі.

Щоб переконатися, що анімації справді працюють, використовуйте:

$(function() {
    $('#first').animate({..., queue: 'my-animation'});
    $('#second').animate({..., queue: 'my-animation'}).dequeue('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
Мертве посилання, знайдено його на веб-
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.