jQuery - podstawowe metody animacji

Stronę tą wyświetlono już: 1148 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:

Kod JavaScript:

Wynik działania (kliknij na div-ie):

Komentarze