Wie führe ich zwei jQuery-Animationen gleichzeitig aus?

Ist es möglich, zwei Animationen gleichzeitig auf zwei verschiedenen Elementen auszuführen? Ich brauche das Gegenteil von dieser Frage Jquery Warteschlangenanimationen .

Ich muss so etwas tun ...

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

aber diese beiden gleichzeitig laufen zu lassen. Das einzige, was ich mir vorstellen könnte, wäre, setTimeouteinmal für jede Animation zu verwenden, aber ich denke nicht, dass es die beste Lösung ist.

ja da ist!

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

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

Das würde ja ja gleichzeitig laufen. Was wäre, wenn Sie zwei Animationen gleichzeitig auf demselben Element ausführen möchten?

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

Dies führt dazu, dass die Animationen in die Warteschlange gestellt werden. Um sie gleichzeitig ausführen zu können, würden Sie nur eine Zeile verwenden.

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

Gibt es eine andere Möglichkeit, zwei verschiedene Animationen gleichzeitig auf demselben Element auszuführen?

Ich glaube, ich habe die Lösung in der jQuery-Dokumentation gefunden:

Animiert alle Absätze mit einem linken Stil von 50 und einer Deckkraft von 1 (undurchsichtig, sichtbar) und schließt die Animation innerhalb von 500 Millisekunden ab. Es wird auch außerhalb der Warteschlange ausgeführt, was bedeutet, dass es automatisch gestartet wird, ohne auf seinen Zug zu warten .

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

einfach hinzufügen : queue: false.

Wenn Sie die oben genannten Schritte so ausführen, wie sie sind, werden sie anscheinend gleichzeitig ausgeführt.

Hier ist ein Testcode:

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

Zwar geben aufeinanderfolgende Aufrufe zum Animieren den Eindruck, dass sie gleichzeitig ausgeführt werden, aber die zugrunde liegende Wahrheit ist, dass es sich um unterschiedliche Animationen handelt, die sehr nahe beieinander liegen.

Um sicherzustellen, dass die Animationen tatsächlich gleichzeitig ausgeführt werden, verwenden Sie:

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

Weitere Animationen können zur Warteschlange "Meine Animation" hinzugefügt werden, und alle können initiiert werden, sofern die letzte Animationswarteschlange vorhanden ist.

Prost, Anthony

In diesem brillanten Blog-Beitrag über das Animieren von Werten in Objekten können Sie die Werte dann verwenden, um zu 100% gleichzeitig zu animieren, was Sie möchten!

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

Ich habe es so benutzt, um rein / raus zu rutschen:

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

Wenn ich meine Antwort poste, um jemandem zu helfen, hat die am besten bewertete Antwort meine Bedenken nicht gelöst.

Als ich Folgendes implementierte [von der oberen Antwort], zitterte meine vertikale Bildlaufanimation nur hin und her:

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

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

Ich bezog mich auf: W3 Schools Set Interval und es löste mein Problem, nämlich den Abschnitt 'Syntax':

setInterval (Funktion, Millisekunden, param1, param2, ...)

Nachdem meine Parameter des Formulars { duration: 200, queue: false }eine Dauer von Null erzwungen hatten, wurden nur die Parameter zur Orientierung betrachtet.

Das lange und kurze, hier ist mein Code, wenn Sie verstehen möchten, warum es funktioniert, lesen Sie den Link oder analysieren Sie die erwarteten Intervallparameter:

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

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

Wo 'autoScroll' ist:

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

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

Viel Spaß beim Codieren!