jQuery - podstawowe metody animacji
Stronę tą wyświetlono już: 2931 razy
jQuery udostępnia zbiór metod powiązanych z obiektami jQuery. Oto lista tych metod:
- animate - umożliwia tworzenie animacji na podstawie ustawień właściwości CSS
Przykład:
Kod HTML:
Listing 1 - <div id="animate" style="background-color:red; width: 100px; margin-bottom: 10px"><div style="width: 100px; height: 50px;background-color: white"></div></div>
Kod JavaScript:
Listing 2 - $("#animate div").mouseover(
- function(){
- $(this).finish();
- $(this).animate({marginLeft: "10px"}, 1000);
- }
- )
- $("#animate div").mouseout(
- function(){
- $(this).finish();
- $(this).animate({marginLeft: "0"}, 1000);
- }
- )
Wynik działania:
- clearQueue - usuwa z kolejki wszystkie elementy animacji, które nie zostały wcześniej uruchomione;
- delay - cofa wcześniej wykonany efekt po określonym upływie czasu;
- dequeue - gdy ta metoda jest wywoływana, wtedy kolejna metoda animacji jest ściągana ze stosu i wykonywana;
- fadeIn - wyświetla element zmieniając jego przezroczystość
Przykład:
Kod HTML:
Listing 3 - <div id="fadein" style="width: 100px; height: 50px; display:none; background-color:red"></div>
- <div id="fadeinbutton"></div>
Kod JavaScript:
Listing 4 - var button = $("<button>").text("Fade in efekt").click(function(){
- $("#fadein").fadeIn(2000);
- });
- $("#fadeinbutton").append(button);
Wynik działania:
- fadeOut - ukrywa element zmieniając jego przezroczystość
Przykład:
Kod HTML:
Listing 5 - <div id="fadeout" style="width: 100px; height: 50px; display:block; background-color:red"></div>
- <div id="fadeoutbutton"></div>
Kod JavaScript:
Listing 6 - var button = $("<button>").text("Fade out efekt").click(function(){
- $("#fadein").fadeOut(2000);
- });
- $("#fadeoutbutton").append(button);
Wynik działania:
- fadeTo - zmienia przezroczystość elementu
Przykład:
Kod HTML:
Listing 7 - <div id="fadeto" style="width: 100px; height: 50px; display:block; background-color:red"></div>
- <div id="fadetobutton"></div>
Kod JavaScript:
Listing 8 - var alpha = 1;
- var button = $("<button>").text("Fade to efekt").css("margin-bottom", "10px").click(function(){
- if(alpha == 1){
- alpha = 0.5;
- }else{
- alpha = 1;
- }
- $("#fadeto").fadeTo(2000, alpha);
- });
- $("#fadetobutton").append(button);
Wynik działania:
- fadeToggle - gdy element jest ukryty to tworzy animację jego pojawienia się z zmianą przezroczystości, a gdy jest widoczny to chowa go tworząc animację stopniowego zaniku
Przykład:
Kod HTML:
Listing 9 - <div id="fadetoggle" style="width: 100px; height: 50px; display:block; background-color:red"></div>
- <div id="fadetogglebutton"></div>
Kod JavaScript:
Listing 10 - var button = $("<button>").text("Fade togle efekt").click(function(){
- $("#fadetoggle").fadeToggle(2000);
- });
- $("#fadetogglebutton").append(button);
Wynik działania:
- finish - kończy działanie obecnie wykonywanej na elemencie animacji;
- hide - ukrywa elementy tworząc animację stopniowego zaniku i zmniejszania się tychże elementów
Przykład:
Kod HTML:
Listing 11 - <div id="hide" style="width: 100px; height: 50px; background-color: red"></div>
- <div id="clickhide" style="width: 100px; height: 50px; background-color: green"></div>
Kod JavaScript:
Listing 12 - >$("#clickhide").click(
- function(){
- if(!$("#hide").is(":hidden")){
- $("#hide").hide(2000);
- }else{
- $("#hide").show(2000);
- }
- }
- );
Wynik działania (kliknij zielony aby ukryć/pokazać czerwony):
- show - pokazuje elementy tworząc animację stopniowego pojawiania się i zwiększania tychże elementów;
- slideDown - wyświetla animację elementów rozwijanych w dół
Przykład:
Kod HTML:
Listing 13 - <div id="slidedown" style="width: 100px; height: 50px; display: none; background-color: red"></div>
- <div id="clickslidedown" style="width: 100px; height: 50px; background-color: green; margin-bottom: 10px"></div>
Kod JavaScript:
Listing 14 - $("#clickslidedown").click(
- function(){
- if($("#slidedown").is(":hidden")){
- $("#slidedown").slideDown(2000);
- }else{
- $("#slidedown").slideUp(2000);
- }
- }
- );
Wynik działania skryptu (kliknij na zielony, aby wyświetlić czerwony):
- slideToggle - zwija elementy gdy są wyświetlone, rozwija gdy nie są wyświetlone
Przykład:
Kod HTML:
Listing 15 - <div id="slidetoggle" style="width: 100px; height: 50px; display: none; background-color: red"></div>
- <div id="clickslidetoggle" style="width: 100px; height: 50px; background-color: green; margin-bottom: 10px"></div>
Kod JavaScript:
Listing 16 - $("#clickslidetoggle").click(
- function(){
- if($("#slidetoggle").is(":hidden")){
- $("#slidetoggle").slideDown(2000);
- }else{
- $("#slidetoggle").slideUp(2000);
- }
- }
- );
Wynik działania skryptu (kliknij na zielony, aby wyświetlić czerwony):
- slideUp - zwija elementy do góry;
- stop - wstrzymuje animację w trakcie jej działania;
- toggle - wyświetla / ukrywa elementy;
Za pomocą wyżej wymienionych metod można złożyć animację, na którą będą składały się odłożone na stosie funkcje animacji. Oto przykład:
Kod HTML:
- <div id="example1" style="width: 400px; height: 200px; margin:auto; background-color: white"><div id="squere" style="width: 10px; height: 10px; position: relative; top: 10px; left: 10px;background-color: red; "></div></div>
Kod JavaScript:
- var speed = 5000;
- $("#example1").click(function(){
- $("#example1 #squere").animate({left: "+=370px"}, speed).animate({top: "+=170px"}, speed).animate({left: "-=370px"}, speed).animate({top: "-=170px"}, speed);
- });
Wynik działania (kliknij na div-ie):

Tytuł:
JavaScript funkcyjnie. Zrównoważone, pragmatyczne programowanie funkcyjne w JavaScript
Autor:
Kyle Simpson

Tytuł:
JavaScript dla dzieci dla bystrzaków
Autor:
Chris Minnick, Eva Holland

Tytuł:
Modularny JavaScript dla zaawansowanych
Autor:
Nicolas Bevacqua

Tytuł:
JavaScript w praktyce. Stwórz twitterowego bota, system sygnalizacyjny LED i inne projekty z użyciem Node.js i Raspberry Pi
Autor:
Lynn Beighley

Tytuł:
Matematyka dla programistów JavaScript
Autor:
Jacek Piechota

Tytuł:
JavaScript i jQuery. Interaktywne strony WWW dla każdego. Podręcznik Front-End Developera
Autor:
Jon Duckett

Tytuł:
ECMAScript 6. Przewodnik po nowym standardzie języka JavaScript
Autor:
Nicholas C. Zakas

Tytuł:
JavaScript i wzorce projektowe. Programowanie dla zaawansowanych. Wydanie II
Autor:
Simon Timms

Tytuł:
HTML,CSS i JavaScript dla każdego. Wydanie VII
Autor:
Laura Lemay, Rafe Colburn, Jennifer Kyrnin

Tytuł:
jQuery w akcji. Wydanie III
Autor:
Bear Bibeault, Yehuda Katz, Aurelio De Rosa