Chcę, aby prosty element div pojawiał się i poruszał się jednocześnie. Załóżmy, że na górze znajduje się ukryty obraz, a gdy kliknę przycisk, obraz powinien znaleźć się pośrodku strony z efektem zanikania.Zanikanie i przesuwanie
ale dla mnie to zanika w pierwszym, a następnie zacznie się poruszać ...
$('#shelf').fadeIn('fast').animate({
'bottom': '54%'
}, 'slow', function() {
// Animation complete.
});
Spróbuj
$('#shelf').fadeIn('fast').animate({
'bottom': '54%'
}, {duration: 'slow', queue: false}, function() {
// Animation complete.
});
Zastosowanie:
$('#shelf').animate({
'bottom': '54%',
'opacity': 1
}, 'slow', function() {
// Animation complete.
});
'#Shelf' ukryty jest w pierwszej kolejności. Więc najpierw muszę to zanikać. W każdym razie dziękuję za odpowiedź. Głosowałem za tobą do góry – FlintOff
jQuery łańcuchy zdarzeń, a więc myśli: „Complete fadeIn, następnie zrobić animację . "
Jeśli dodasz zanikanie kodu (np. opacity: 100%;) w animacji, zrobi wszystko naraz.
Nie, to nie wygląda tak, funkcja animacji nie jest w funkcji zwrotnej "fadeIn". Jeśli nie wykona się jednocześnie, to dlatego, że fadeIn wewnętrznie używa animacji i dlatego istnieje kolejka zdarzeń fx. – Darm
Ponieważ można umieścić fadeIn() pierwsza w łańcuchu. Spróbuj rozdzielić dwa na dwa osobne połączenia:
$('#shelf').fadeIn('fast');
$('#shelf').animate({
'bottom': '54%'
}, 'slow', function() {
// Animation complete.
});
To jest to samo, co on. Animacja nie czeka na zakończenie fadeIn, tylko, jeśli to zrobił, to ma znaczenie: '$ ('# shelf') fadeIn ('fast', function() {$ (this) .animate ({'bottom') : '54% '},' slow ');}); ' –
Dobrze, że szybko znika, ale porusza się powoli. Oba zaczynają się w tym samym czasie, ale najpierw zauważasz zanikanie.
Uczyń je tak samo, a oba będą pojawiać się w tym samym czasie.
jQuery łączy zdarzenia i uruchamia je w kolejności, przez co zanikanie następuje przed animacją.
Oto przykład użycia właściwości przejścia CSS3 do zaopiekowania się animacją.
@Mr. Flint - Proszę przyjąć tę odpowiedź, jeśli ci to pomoże. – ShankarSangoli
Przyjąłem twoją odpowiedź. Dziękuję za pomoc. – FlintOff
Kolejka: false jest śliska. Dzięki za wskazówkę. – earl3s