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

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

  $("#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:

  <div id="fadein" style="width: 100px; height: 50px; display:none; background-color:red"></div> <div id="fadeinbutton"></div>

  Kod JavaScript:

  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:

  <div id="fadeout" style="width: 100px; height: 50px; display:block; background-color:red"></div> <div id="fadeoutbutton"></div>

  Kod JavaScript:

  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:

  <div id="fadeto" style="width: 100px; height: 50px; display:block; background-color:red"></div> <div id="fadetobutton"></div>

  Kod JavaScript:

  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:

  <div id="fadetoggle" style="width: 100px; height: 50px; display:block; background-color:red"></div> <div id="fadetogglebutton"></div>

  Kod JavaScript:

  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:

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

  >$("#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:

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

  $("#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:

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

  $("#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:

Kod JavaScript:

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