JQuery i animacje
JQuery i animacje
JQuery i animacje to bezpłatna lekcja jQuery Academy na CoddyKit. To lekcja 1 z 1. Możesz przeczytać całą lekcję poniżej za darmo — a potem ćwiczyć ją interaktywnie w przeglądarce z wbudowanym edytorem kodu i tutorem AI dostępnym 24/7. To część ścieżki edukacyjnej jQuery Academy, a Twój postęp synchronizuje się między webem a aplikacją CoddyKit. Kurs jQuery Academy zawiera 1 lekcji w sumie.
Wprowadzenie
Dzień dobry,
W tej sekcji poznamy animacje w jQuery.
Zaczynajmy.
Metody show i hide
Metody show() i hide()
Za pomocą metod show i hide możemy pokazywać i ukrywać obiekt DOM na ekranie.
<h1 id="target">Hello Coddy</h1>
<button id="show">Show</button>
<button id="hide">Hide</button>
<script>
/*
hide method hides target
element from DOM.
*/
$('#hide').on('click', function(){
$('#target').hide();
})
/*
show method shows the
target element in the DOM.
*/
$('#show').on('click', function(){
$('#target').show();
});
</script>Metoda toggle
Metoda toggle()
Oprócz nich istnieje metoda toggle(), której działanie można odgadnąć na podstawie nazwy. Za jej pomocą ukryty element zostanie pokazany, a widoczny — ukryty.
<h1 id="target">Hello Coddy</h1>
<button id="toggle">Toggle</button>
<script>
/*
toggle() method shows or hides the
target element in the DOM.
*/
$('#toggle').on('click', function(){
$('#target').toggle();
});
</script>Metody fadeIn i fadeOut
Metody fadeIn() i fadeOut()
Teraz poznajmy metody fadeIn i fadeOut, które animują pokazywanie i ukrywanie elementów HTML.
Metody fadeIn i fadeOut opcjonalnie przyjmują wartość liczbową w milisekundach. Wartość ta określa czas trwania animacji w milisekundach. Jeśli nie przekażemy argumentu, zostanie użyta wartość domyślna.
<h1 id="target">Hello Coddy</h1>
<button id="show">Show with Animation</button>
<button id="hide">Hide with Animation</button>
<script>
/*
fadeOut method hides target
element from DOM with Animation
*/
$('#hide').on('click', function(){
$('#target').fadeOut();
})
/*
fadeIn method shows the
target element in the DOM with Animation
*/
$('#show').on('click', function(){
$('#target').fadeIn();
});
</script>fadein i fadeout
fadeOut zmniejsza krycie elementów przez określony czas. Gdy krycie osiągnie wartość 0, właściwość display przyjmuje wartość none.
Jest to poznana wcześniej metoda hide() wzbogacona o animację krycia.
FadeIn jest przeciwieństwem metody fadeOut.
Metoda fadeToggle
Metoda fadeToggle()
Metoda fadeToggle() działa podobnie do metody toggle(). Jeśli element jest ukryty, pokazuje go. Jeśli jest widoczny, ukrywa go — jak można się domyślić, wykonując te czynności za pomocą animacji.
<h1 id="target">Hello Coddy</h1>
<button id="toggle">Fade Toggle</button>
<script>
/*
fadeToggle() method shows or hides the
target element in the DOM with Animation
*/
$('#toggle').on('click', function(){
$('#target').fadeToggle();
});
</script>Animacje CSS
Animacje w jQuery wykonuje się za pomocą metody animate(). Metoda ta przyjmuje argument w formacie JSON. W tym obiekcie JSON definiujemy właściwości CSS elementu docelowego, które mają się zmienić.
Drugim parametrem jest czas trwania animacji w milisekundach (jest to parametr opcjonalny).
<div id="target">Box</div>
<style>
#target {
width:50px;
width:50px;
background:pink;
}
</style>
<script>
/*
The animate method takes a JSON object
containing four properties as an argument.
*/
$("#target").animate({
width: "100px",
height: "100px",
marginLeft: "50px",
opacity: 0.5
}, 4000);
</script>Procedura obsługi zdarzeń animacji
Ostatnim argumentem, który możemy przypisać do metody animate, jest procedura obsługi zdarzeń uruchamiana po zakończeniu animacji.
<div id="target">Box</div>
<style>
#target {
width:50px;
width:50px;
background:pink;
}
</style>
<script>
/*
The animate method takes a JSON object
containing four properties as an argument.
*/
$("#target").animate({
width: "100px",
height: "100px",
marginLeft: "50px",
opacity: 0.5
}, 4000,
function(){
alert('animation is completed')
});
</script>Animacja względna
Warto wspomnieć o pewnym ułatwieniu dotyczącym animacji.
Właściwości używane w animacjach mogą otrzymywać wartości względne zamiast wartości bezwzględnych.
Poniższy przykład pozwoli lepiej to zrozumieć.
Podczas animacji do właściwości top odpowiedniego elementu docelowego dodano 100px.
$("button").animate({
top: "+=100px",
});Zatrzymywanie animacji
Aby zatrzymać aktualnie trwającą animację, wystarczy wybrać element docelowy, dla którego ją zdefiniowano, i użyć metody stop().
const $ = (selector) => ({ stop: () => console.log('stop called on ' + selector) });
$("#target").stop();Gotowe metody
Tak jak możemy tworzyć animacje, definiując własne właściwości CSS za pomocą jQuery, możemy również korzystać z gotowych metod udostępnianych przez jQuery.
Przeanalizujmy poniższy kod.
//showing by slide up animation.
console.log("slideUp animation on div elements");
//hiding by slide up animation.
console.log("slideUp animation on div elements");
/*
hides if the element is showing,
or shows if it is hidden.
*/
console.log("slideToggle animation on div elements");Czas trwania animacji względnej
Tak jak w przypadku innych metod animacji, jeśli chcemy określić czas trwania animacji w tej metodzie, powinniśmy przekazać go jako pierwszy argument.
// animation takes 1 second.
console.log("$('div').slideUp(1000) - slides element up over 1000ms");
/*
We can also use a relative
expression like slow or fast.
*/
console.log("$('div').slideUp('fast') - slides element up quickly");
console.log("$('div').slideToggle('slow') - toggles slide animation slowly");Procedura obsługi zdarzeń
To już ostatnia informacja o animacji przesuwania. Chyba o czymś zapomniałem.
Podobnie jak w metodzie animate (aby zdefiniować procedurę obsługi zdarzeń uruchamianą po zakończeniu animacji), możemy przekazać anonimową funkcję do powyższych metod jako drugi argument.
setTimeout(function() {
//Call when animation is completed
}, 1000);Gratulacje
Gratulacje 🎉
Poznaliśmy JQuery i animacje.
W następnej sekcji poznamy operacje AJAX.
Ucz się JavaScript dzięki korepetycjom AI — za darmo
Pisz i uruchamiaj kod w przeglądarce, otrzymuj natychmiastową pomoc od korepetytora AI dostępnego 24/7 i kontynuuj naukę w sieci lub w aplikacji.
- Kursy
- 22
- Lekcje
- 48
Często zadawane pytania
Czy lekcja „JQuery i animacje” jest bezpłatna?
Tak — pełny tekst „JQuery i animacje” jest dostępny za darmo tutaj w sieci. Aby ćwiczyć ją interaktywnie (wbudowany edytor kodu i tutor AI dostępny 24/7) i odblokować resztę kursu jQuery Academy, przejdź na CoddyKit PRO. Kurs jQuery Academy zawiera 1 lekcji w sumie.
Co nauczysz się w „JQuery i animacje”?
JQuery i animacje Ćwiczysz jQuery Academy z praktycznym kodem, który uruchamiasz bezpośrednio w przeglądarce, a tutor AI dostępny 24/7 odpowiada na Twoje pytania podczas pracy nad lekcją.
Czy potrzebuję doświadczenia, aby zacząć jQuery Academy?
Nie wymagamy żadnego doświadczenia. jQuery Academy w CoddyKit jest strukturyzowany dla początkujących i zaawansowanych użytkowników, więc możesz zacząć tutaj lub od początku i uczyć się w swoim tempie. To lekcja 1 z 1.
Ile czasu zajmuje lekcja „JQuery i animacje”?
Większość lekcji CoddyKit trwa około 5–10 minut. Każda lekcja to mały, interaktywny krok, dzięki czemu robisz systematyczne postępy i zawsze wracasz dokładnie do tego samego miejsca — na webie i w aplikacji.
Czy mogę pisać i uruchamiać kod w tej lekcji jQuery Academy?
Tak. Każda lekcja jQuery Academy zawiera wbudowany edytor kodu, więc piszesz i uruchamiasz prawdziwy kod bezpośrednio w przeglądarce i od razu otrzymujesz sprzężenie zwrotne od AI — bez konfiguracji na komputerze.