Jak uruchomić dwie animacje jQuery jednocześnie?

Question

Czy możliwe jest jednoczesne uruchomienie dwóch animacji na dwóch różnych elementach? Potrzebuję przeciwieństwa tego pytania Jquery queueing animations.

muszę zrobić coś takiego ...

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

ale by uruchomić te dwa w tym samym czasie. Jedyne, co mogłem wymyślić, to jednorazowe użycie dla każdej animacji, ale nie sądzę, że jest to najlepsze rozwiązanie.

Answer 1

tak jest!

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

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

Answer 2

Jeśli uruchomisz powyższe tak, jak jest, będą wyglądały na uruchomione jednocześnie.

Oto niektóre kodu testu:

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

Answer 3

To by uruchomić jednocześnie tak. co jeśli chciałbyś jednocześnie uruchomić dwie animacje na tym samym elemencie?

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

To kończy się w kolejce animacji. , aby uruchomić je jednocześnie, używałbyś tylko jednej linii.

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

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

Answer 4

wierzę, znalazłem rozwiązanie w dokumentacji jQuery:

ożywia cały akapit do lewej stylu 50 i krycie 1 (nieprzezroczyste, widoczny), ukończenie animację zasięgu 500 milisekund. Wykona także zrób to poza kolejką, co oznacza, że ​​ automatycznie rozpocznie się bez czekając na swoją kolej.

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

wystarczy dodać: queue: false.

Answer 5

Zobacz ten świetny wpis na blogu o animowaniu wartości w obiektach. Możesz użyć wartości do animacji, co chcesz, 100% jednocześnie!

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

Używałem go tak, aby przesuwać się w/out:

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

Answer 6

Chociaż prawdą jest, że kolejne rozmowy animować będą sprawiać wrażenie, że są uruchomione w tym samym czasie, podstawową prawdą jest to, że są to odrębne animacje działające bardzo blisko siebie.

ubezpieczyć animacje są rzeczywiście działa w tym samym wykorzystania czasu:

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

Dalsze animacje mogą być dodawane do kolejki „moja animacja” i wszystko może zostać zainicjowany pod warunkiem ostatnią animację rozkolejkowania'S im.

Cheers, Anthony