Jak uruchomić dwie animacje jQuery jednocześnie?

211

Czy można uruchomić jednocześnie dwie animacje na dwóch różnych elementach? Potrzebuję przeciwieństwa tego pytania w kolejkach animacji Jquery .

Muszę zrobić coś takiego ...

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

ale aby uruchomić te dwa jednocześnie. Jedyne, co mogłem wymyślić, to użyć setTimeoutraz dla każdej animacji, ale nie sądzę, że jest to najlepsze rozwiązanie.

Jakub Arnold
źródło
Eee ... próbowałeś tego? Jeśli użyjesz dokładnego kodu, który tam masz, dla mojego zrozumienia, jak to animate()działa, powinny one działać jednocześnie.
chaos
Proszę bardzo - jsbin.com/axata . Dodaj / edytuj, aby zobaczyć kod
Russ Cam
Mam prawdziwy problem z animowaniem różnych właściwości CSS. To pytanie wygląda na stare i umieściłem je w JSFiddle, wydaje się, że oba podejścia działają. Czy to jest nadal aktualne? jsfiddle.net/AVsFe
valk
3
W obecnej jquery i wierzę, że od jQuery 1.4 powyższy kod animuje oba jednocześnie, ponieważ kolejki fx są dołączone do elementu, który wywołujesz .animate (), a nie kolejki globalnej.
Chris Moschini,
Powyżej jsbin nie żyje. jsfiddle tego samego, który działa: jsfiddle.net/b9chris/a8pwbhx1
Chris Moschini

Odpowiedzi:

418

tak jest!

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

    $("#second").animate({
       width: '600px'
    }, { duration: 200, queue: false });
});
Jozuego
źródło
15
Dzięki za to, nie wiedziałem o tej queuezmiennej!
dotty
4
Czy mogę zapytać, jaki jest cel przekazania funkcji do jQuery?
pilau
13
@pilau Zostanie wykonane, gdy dokument będzie gotowy. Jest to skrót od $ (document) .ready (function () {}); i umożliwia umieszczenie kodu javascript przed definicją elementu.
Raphael Michel,
1
tak, możesz zjadać kolejkę na wartość prawda / fałsz lub nadać jej ciąg (nazwę kolejki) w ten sposób, obie animacje używają tego samego timera ...
AlexK 25.10.13
3
Jak dodałbyś do tego onComplete?
jmchauv
19

To działałoby jednocześnie tak. co jeśli chcesz uruchomić dwie animacje na tym samym elemencie jednocześnie?

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

To kończy kolejkowanie animacji. aby uruchomić je jednocześnie, użyłbyś tylko jednej linii.

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

Czy istnieje inny sposób jednoczesnego uruchamiania dwóch różnych animacji na tym samym elemencie?

Waseem
źródło
9

Myślę, że znalazłem rozwiązanie w dokumentacji jQuery:

Animuje cały akapit do lewego stylu 50 i krycia 1 (nieprzezroczysty, widoczny), kończąc animację w ciągu 500 milisekund. Zrobi to również poza kolejką, co oznacza, że ​​rozpocznie się automatycznie bez oczekiwania na swoją kolej .

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

wystarczy dodać: queue: false.

użytkownik697709
źródło
1
Jak zintegrować pełną funkcję na tym? : s
Brainfeeder
8

Jeśli uruchomisz powyższe, będą one działały jednocześnie.

Oto kod testowy:

<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>
Andreas Grech
źródło
3

Chociaż prawdą jest, że kolejne wezwania do animacji będą wyglądać tak, jakby były uruchamiane w tym samym czasie, podstawową prawdą jest to, że są to odrębne animacje działające bardzo blisko równoległości.

Aby upewnić się, że animacje są uruchomione jednocześnie, użyj:

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

Kolejne animacje mogą być dodawane do kolejki „moja animacja” i wszystkie mogą być inicjowane pod warunkiem, że ostatnia animacja usunie je z kolejki.

Pozdrawiam, Anthony

Borgboy
źródło
2

Zobacz ten wspaniały wpis na blogu o animowaniu wartości w obiektach. Możesz następnie użyć tych wartości do animowania wszystkiego, co chcesz, w 100% jednocześnie!

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

Użyłem tego w ten sposób, aby wsunąć / wyjąć:

        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');
                }
            });
        }
Erik Schoel
źródło
1
Martwy link, znaleziono go z powrotem na stronie web.archive.org/web/20150101065437/http://www.josscrowcroft.com/…
PhiLho
0

Wysłanie mojej odpowiedzi, aby komuś pomóc, najwyżej oceniona odpowiedź nie rozwiała mojego skrupułów.

Kiedy zaimplementowałem następujące [z najwyższej odpowiedzi], moja animacja przewijania w pionie drżała w tę iz powrotem:

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

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

Odniosłem się do: W3 Schools Set Interval i to rozwiązało mój problem, mianowicie sekcję „Składnia”:

setInterval (funkcja, milisekundy, param1, param2, ...)

Mając moje parametry formularza { duration: 200, queue: false }wymusiły czas trwania zerowy i sprawdził tylko parametry w celu uzyskania wskazówek.

Długi i krótki, oto mój kod, jeśli chcesz zrozumieć, dlaczego to działa, przeczytaj link lub przeanalizuj oczekiwane parametry interwału:

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

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

Gdzie jest „autoScroll”:

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

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

Miłego kodowania!

EGC
źródło