Szybki kurs: godzina dziennie z jQuery #2 – manipulacja elementami

Dodany dnia piątek, 15 Styczeń 2010 przez Alchemy Code

5 komentarze BOOKMARK

W poprzednim odcinku kursu jQuery dowiedzieliśmy się w jaki sposób zacząć pracę z biblioteką jQuery, jak zbudować pierwszą funkcję oraz udało się zbudować prostą animację związaną z pokazywaniem i ukrywaniem elementu. Dzisiaj rozwiniemy ten temat, starając się opisać inne funkcje związane z pokazywaniem i ukrywaniem elementów na stronie.

Czego dowiesz się z artykułu?

jak wykorzystać funkcję slideUp i slideDown
jak wykorzystać funkcję show i hide

Funkcje slideUp i slideDown

Aby wzbogacić animację z poprzedniej części kursu, możemy pokusić się o zmianę funkcji z rodziny fade na funkcję z rodziny slide. Tym sposobem elementy umieszczone na stronie nie będą zanikać/pojawiać się stopniowo, a za to będą się rozwijać i zwijać.

Zobacz przykład SlideUp i SlideDown

Cała operacja jest naprawdę prosta, po prostu zamieniamy funkcje fadeIn i fadeOut na slideUp i slideDown.

$(function(){
$("#pojBox").click(function(){
$("#pojBox").slideUp(4000);
});
$("a").click(function(){
$("#pojBox").slideDown('normal');
});
});

Warto jeszcze wspomnieć, że jeżeli użyjemy funkcji bez parametrów czasowych, to animacja będzie trwała 400 milisekund. Oczywiści podobnie jak w przypadku fadeIn i fadeOut możemy jako parametr funkcji podać liczbę milisekund trwania animacji, jak również użyć predefiniowanych szybkości animacji: slow, normal i fast.

Funkcje show i hide

Innymi ciekawymi funkcjami są show i hide. Podobnie jak fadeIn, fadeOut, slideUp i slideDown, także i te funkcje przyjmują parametr czasowy wykonywania animacji w milisekundach lub predefinowanych nazwach szybkości.

Jak już z pewnością zauważyliście funkcje fadeIn/fadeOut manipulowały wartością opacity, z kolei funkcje slideIn/slideOut manipulowały wartością height elementu. Elementem wyróżniającym funkcje show i hide jest fakt, że manipulują one 3 wartościami jednocześnie: width, height oraz opacity.

Zobacz przykład hide i show

Po raz kolejny zmieniliśmy jedynie nazwy funkcji:

$(function(){
$("#pojBox").click(function(){
$("#pojBox").show(4000);
});
$("a").click(function(){
$("#pojBox").hide('normal');
});
});

Fade, Slide i Show w praktyce

Skoro już poznaliśmy ogólną zasadę działania (proste, prawda?), spróbujmy zrobić coś nieco bardziej zaawansowanego. Z wykorzystaniem tych 3 funkcji postaramy się zrobić prosty agregator teksu, wykorzystujący 3 różne typy animacji.

Najpierw zacznijmy od szkieletu, którym będzie animacja z fadeIn. Załóżmy, że w dokumencie mamy taką strukturę:

<div class="pojOneFade">
<div class="pojTop">
<a href="#" class="fadeOut">Zwiń</a>
<p>Pierwsza wiadomość</p>
<a href="#" class="fadeIn">Rozwiń</a>
</div>
<div class="clear"></div>
<div class="pojBottom">
<p>Treść pierwszej wiadomości demonstrująca w jaki sposób wykorzystać funkcję z biblioteki jQuery <b>fadeIn</b> i <b>fadeOut</b></p>
</div>
</div>

Pojemnik #pojTop będzie kontenerem na nagłówek wiadomości oraz na przyciski pokazujący i ukrywający resztę wiadomości, znajdującej się w pojemniku #pojBottom. Linkami pokazującymi i zwijającymi będą odpowiednio a.fadeOut oraz a.fadeIn

Teraz aby wprawić to wszystko w ruch, wystarczy podpiąć akcję na kliknięcie w linki:

$(function(){
$("a.fadeOut").click(function(){
$(".pojOneFade .pojBottom").fadeOut('slow');
});
$("a.fadeIn").click(function(){
$(".pojOneFade .pojBottom").fadeIn('slow');
});
});

I gotowe! Zobacz przykład animacji w jQuery

A teraz połączmy wszystko w jedno budując jeszcze 2 kontenery na takiej samej zasadzie jak opisany powyżej. Otrzymamy wtedy w dokumencie:

<div class="pojOneFade">
<div class="pojTop">
<a href="#" class="fadeOut">Zwiń</a>
<p>Pierwsza wiadomość</p>
<a href="#" class="fadeIn">Rozwiń</a>
</div>
<div class="clear"></div>
<div class="pojBottom">
<p>Treść pierwszej wiadomości demonstrująca w jaki sposób wykorzystać funkcję z biblioteki jQuery <b>fadeIn</b> i <b>fadeOut</b></p>
</div>
</div>
<div class="pojOneSlide">
<div class="pojTop">
<a href="#" class="slideUp">Zwiń</a>
<p>Druga wiadomość</p>
<a href="#" class="slideDown">Rozwiń</a>
</div>
<div class="clear"></div>
<div class="pojBottom">
<p>Treść drugiej wiadomości demonstrująca w jaki sposób wykorzystać funkcję z biblioteki jQuery <b>slideUp</b> i <b>slideDown</b></p>
</div>
</div>
<div class="pojOneShow">
<div class="pojTop">
<a href="#" class="hide">Zwiń</a>
<p>Trzecia wiadomość</p>
<a href="#" class="show">Rozwiń</a>
</div>
<div class="clear"></div>
<div class="pojBottom">
<p>Treść trzeciej wiadomości demonstrująca w jaki sposób wykorzystać funkcję z biblioteki jQuery <b>show</b> i <b>hide</b></p>
</div>
</div>

a następnie podpinając do dokumentu funkcje jQuery:

$(function(){
$("a.fadeOut").click(function(){
$(".pojOneFade .pojBottom").fadeOut('slow');
});
$("a.fadeIn").click(function(){
$(".pojOneFade .pojBottom").fadeIn('slow');
});
$("a.slideUp").click(function(){
$(".pojOneSlide .pojBottom").slideUp('slow');
});
$("a.slideDown").click(function(){
$(".pojOneSlide .pojBottom").slideDown('slow');
});
$("a.show").click(function(){
$(".pojOneShow .pojBottom").show('slow');
});
$("a.hide").click(function(){
$(".pojOneShow .pojBottom").hide('slow');
});
});

Otrzymujemy wynik działania animacji z wykorzystaniem jQuery

I gotowe. W ten oto łatwy, prosty i przyjemny sposób poznaliśmy podstawy animacji elementów w jQuery. W kolejnej części kursu przyjrzymy się baczniej funkcji animate() oraz toggle(). Dodatkowo a najbliższym czasie pojawi się dodatkowy odcinek opisujący selektory i filtry w jQuery, których znajomość jest niezbędna do swobodnego programowania z wykorzystaniem biblioteki jQuery.

Zapisz się na RSS by dowiadywać się o nowościach w serwisie!