Autor podstrony: Krzysztof Zajączkowski

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

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

Layout wykonany przez autora strony, wszelkie prawa zastrzeżone. Jakiekolwiek użycie części lub całości grafik znajdujących się na tej stronie bez pisemnej zgody jej autora surowo zabronione.