jQuery - podstawowe metody animacji

Stronę tą wyświetlono już: 190 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
  1. <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
  1. var speed = 5000;
  2. $("#example1").click(function(){
  3. $("#example1 #squere").animate({left: "+=370px"}, speed).animate({top: "+=170px"}, speed).animate({left: "-=370px"}, speed).animate({top: "-=170px"}, speed);
  4. });

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

Komentarze