W poprzednim wpisie przedstawiłem obsługę zdarzeń oraz selektory. W tym wpisie pokażę gotowy przykład, który wykorzystuje animacje. Do zrozumienia tego przykładu będzie potrzebna podstawowa wiedza z CSS, JavyScript oraz HTML.
Potrzebne nam będą 3 warstwy html, jako obiekt warstwy możemy użyć znacznika DIV
<div class="pudelko"></div> <div class="pudelko zaaograglone"></div> <div class="pudelko wypasione"></div>
Warstwy te zawierają 3 pudelka, które posłużą nam do zaprezentowania animacji JQuery.
Aby te „pudełka” nabrały wyglądu należy je odpowiednio wystylować, użyję do tego CSS
div.pudelko{width:100px; height:100px; margin:5px; float:left; background-color:red;}
div.pudelko.zaaograglone{border-radius:25px;}
div.pudelko.wypasione{border: 4px solid black;}
Ogólnie każde pudełko ma rozmiar 100×100 px w ogół margines 5px. Pudełka układane są od lewej strony oraz mają czerwony kolor tła. Pudełko zaaokrąglone posiada zaokrąglenie 25px a pudełko wypasione posiada obramowanie o szerokości 4px w kolorze czarnym.
Czas na JQuery.
$(function (){
$("div.pudelko").click(function (){
if($(this).hasClass('wypasione'))
{
$(this).slideToggle();
}
else
{
$(this).css('background-color', "green");
}
});
});
W powyższym przykładzie wykorzystywana jest metoda obsługująca zdarzenie ready(). Po wczytaniu dokumentu funkcja Jquery wybiera wszystkie elementy DIV które posiadają klasę „pudelko” oraz przypisuje tym elementom obsługę zdarzenia CLICK.
$(this) jest to odwołanie do elementu, który został wybrany w selektorze. Funkcja hasClass sprawdza czy element, który wybraliśmy zawiera określoną klasę. W naszym przypadku jeśli element zawiera klasę „wypasione” to zostanie on zwinięty, a jeżeli nie to jego kolor zmieni się na zielony.
Jak widzicie manipulacja kodem CSS z poziomu JQuery jest trywialna. Wystarczy znać właściwości CSS oraz użyć funkcji CSS() na elemencie, którego styl chcemy zmienić.
Funkcja slideToggle() sprawia, że element rozwija się się jeśli jest zwinięty lub zwija jeśli jest rozwinięty. Alternatywnymi metodami są metody slideUp() oraz slideDown().
Gotowy działający przykład możecie zobaczyć TUTAJ
Do stosowania bardziej złożonych animacji używa się funkcji animate()
Aby zastosować bardziej skomplikowane skrypty powinniśmy użyć funkcji animate().
Przed stworzeniem skryptu w Jquery potrzebujemy stylów oraz html-a
HTML:
<a id="start" href="#start">Animuj</a> <div id="pudelko"></div>
CSS:
#pudelko{width:100px; height:100px; margin:5px; float:left; background-color:red; font-size:2em;}
#start{float:left; clear:both;}
Oraz najważniejszego czyli kodu JavaScript używającego JQuery oraz animacji
$(function (){
var i = 1; //zadeklarowanie zmiennej licznika
$( "#start" ).click(function() { // obsługa zdarzenia click elementu o id="start"
if(i % 2) // operacja modulo(reszta z dzielenia) czyli co 2 klikniecie bedzie wykonywany ten blok
{
$( "#pudelko" ).animate({
width: "70%",
opacity: 0.4,
marginLeft: "0.6in",
fontSize: "3em",
borderWidth: "10px"
}, 1500 );
}
else
{
$( "#pudelko" ).animate({
width: "100px",
opacity: 1,
marginLeft: "5px",
fontSize: "2em",
borderWidth: "10px"
}, 1500 );
}
++i; //preinkrementacja licznika czyli dodawanie +1 za kazdym kliknieciem, potrzebne dla licznika
});
});
Funkcja animate() przyjmuje 2 parametry. Pierwszym z nich jest tablica właśiwości CSS, a drugim czas w jakim wartości CSS elementu powinny uzyskać wartości podane w parametrze pierwszym. Czas jest podany w ms.
Jest to prosta funkcja, która pozwala tworzyć niesamowite efekty.
Aby zobaczyć kod w akcji wejdź tutaj
To tyle jeśli chodzi o podstawy animacji w JQuery. W następnych przykładach będę je wykorzystywał i pokażę, jak na przykład napisać własny slider, albo skrypt zakładek.
Zostaw komentarz