Jak uruchomić dwie animacje jQuery jednocześnie?

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.

tak jest!

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

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

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?

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.

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>

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

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');
                }
            });
        }

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!