jQuery - podstawowe metody animacji

Stronę tą wyświetlono już: 2717 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
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
1. $("#animate div").mouseover(
2. function(){
3. $(this).finish();
4. $(this).animate({marginLeft: "10px"}, 1000);
5. }
6. )
7. $("#animate div").mouseout(
8. function(){
9. $(this).finish();
10. $(this).animate({marginLeft: "0"}, 1000);
11. }
12. )
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
1. <div id="fadein" style="width: 100px; height: 50px; display:none; background-color:red"></div>
2. <div id="fadeinbutton"></div>
Kod JavaScript:
Listing 4
1. var button = $("<button>").text("Fade in efekt").click(function(){
2. $("#fadein").fadeIn(2000);
3. });
4. $("#fadeinbutton").append(button);
Wynik działania:
fadeOut - ukrywa element zmieniając jego przezroczystość
Przykład:

Kod HTML:
Listing 5
1. <div id="fadeout" style="width: 100px; height: 50px; display:block; background-color:red"></div>
2. <div id="fadeoutbutton"></div>
Kod JavaScript:
Listing 6
1. var button = $("<button>").text("Fade out efekt").click(function(){
2. $("#fadein").fadeOut(2000);
3. });
4. $("#fadeoutbutton").append(button);
Wynik działania:
fadeTo - zmienia przezroczystość elementu
Przykład:

Kod HTML:
Listing 7
1. <div id="fadeto" style="width: 100px; height: 50px; display:block; background-color:red"></div>
2. <div id="fadetobutton"></div>
Kod JavaScript:
Listing 8
1. var alpha = 1;
2. var button = $("<button>").text("Fade to efekt").css("margin-bottom", "10px").click(function(){
3. if(alpha == 1){
4. alpha = 0.5;
5. }else{
6. alpha = 1;
7. }
8. $("#fadeto").fadeTo(2000, alpha);
9. });
10. $("#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
1. <div id="fadetoggle" style="width: 100px; height: 50px; display:block; background-color:red"></div>
2. <div id="fadetogglebutton"></div>
Kod JavaScript:
Listing 10
1. var button = $("<button>").text("Fade togle efekt").click(function(){
2. $("#fadetoggle").fadeToggle(2000);
3. });
4. $("#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
1. <div id="hide" style="width: 100px; height: 50px; background-color: red"></div>
2. <div id="clickhide" style="width: 100px; height: 50px; background-color: green"></div>
Kod JavaScript:
Listing 12
1. >$("#clickhide").click(
2. function(){
3. if(!$("#hide").is(":hidden")){
4. $("#hide").hide(2000);
5. }else{
6. $("#hide").show(2000);
7. }
8. }
9. );
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
1. <div id="slidedown" style="width: 100px; height: 50px; display: none; background-color: red"></div>
2. <div id="clickslidedown" style="width: 100px; height: 50px; background-color: green; margin-bottom: 10px"></div>
Kod JavaScript:
Listing 14
1. $("#clickslidedown").click(
2. function(){
3. if($("#slidedown").is(":hidden")){
4. $("#slidedown").slideDown(2000);
5. }else{
6. $("#slidedown").slideUp(2000);
7. }
8. }
9. );
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
1. <div id="slidetoggle" style="width: 100px; height: 50px; display: none; background-color: red"></div>
2. <div id="clickslidetoggle" style="width: 100px; height: 50px; background-color: green; margin-bottom: 10px"></div>
Kod JavaScript:
Listing 16
1. $("#clickslidetoggle").click(
2. function(){
3. if($("#slidetoggle").is(":hidden")){
4. $("#slidetoggle").slideDown(2000);
5. }else{
6. $("#slidetoggle").slideUp(2000);
7. }
8. }
9. );
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:

Listing 17

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

Listing 18

var speed = 5000;
$("#example1").click(function(){
$("#example1 #squere").animate({left: "+=370px"}, speed).animate({top: "+=170px"}, speed).animate({left: "-=370px"}, speed).animate({top: "-=170px"}, speed);
});