Jak uruchomić dwie animacje jQuery jednocześnie?
Czy możliwe jest jednoczesne uruchamianie dwóch animacji na dwóch różnych elementach? Potrzebuję przeciwieństwa do tego pytania jQuery queueing animations .
Muszę zrobić coś takiego...$('#first').animate({ width: 200 }, 200);
$('#second').animate({ width: 600 }, 200);
/ Align = "left" / Jedyne, co przyszło mi do głowy, to użycie setTimeout
raz do każdej animacji, ale nie sądzę, aby było to najlepsze rozwiązanie. 6 answers
Tak jest!
$(function () {
$("#first").animate({
width: '200px'
}, { duration: 200, queue: false });
$("#second").animate({
width: '600px'
}, { duration: 200, queue: false });
});
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2016-08-13 16:50:34
/ Align = "left" / co zrobić, 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 się kolejką animacji. aby uruchomić je jednocześnie, należy użyć tylko jednej linii.
$(function () {
$('#first').animate({ width: '200px', marginTop:'50px' }, 200);
});
Czy Jest jakiś inny sposób na jednoczesne uruchomienie dwóch różnych animacji na tym samym elemencie ?
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2009-11-03 11:25:57
Jeśli uruchomisz powyższe tak, jak są, będą działać 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>
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2009-08-09 12:38:10
Wydaje mi się, że znalazłem rozwiązanie w dokumentacji jQuery:
Animuje cały akapit do lewego stylu 50 i nieprzezroczystość 1 (nieprzezroczyste, widoczny), kończąc animację w ciągu 500 milisekund. będzie również zrobić poza kolejką, czyli to rozpocznie się automatycznie bez waiting for its turn .
$( "p" ).animate({ left: "50px", opacity: 1 }, { duration: 500, queue: false });
Wystarczy dodać: queue: false
.
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2011-12-23 21:09:57
Zobacz ten genialny wpis na blogu o animowaniu wartości w obiektach.. następnie możesz użyć tych wartości, aby animować, co chcesz, w 100% jednocześnie!
Użyłem go tak, 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');
}
});
}
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2012-08-16 23:19:26
Prawdą jest, że kolejne wywołania programu animate będą wyglądały tak, jakby były uruchamiane w tym samym czasie, ale prawdą jest, że są to odrębne animacje działające bardzo blisko równoległości.
Aby upewnić się, że animacje rzeczywiście działają w tym samym czasie użyj:
$(function() {
$('#first').animate({..., queue: 'my-animation'});
$('#second').animate({..., queue: 'my-animation'}).dequeue('my-animation');
});
Kolejne animacje mogą być dodawane do kolejki 'my-animation' i wszystkie mogą być inicjowane pod warunkiem, że ostatnia animacja zostanie dodana.
Pozdrawiam, AnthonyWarning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2017-02-11 23:01:56