-
FadeIn, fadeOut, fadeTo - czyli o pojawianiu się i znikaniu
dodano 04.12.2007 / komentarzy: 1 / autor: palmiakW tym tutorialu pokażę Wam jak działają trzy efektowne funkcje jQuery, czyli
fadeIn(),fadeOutorazfadeTo(). Dodatkowo zaprezentuję gdzie można je zastosować w praktyce.fadeIn
Funkcja
fadeIn()służy do pokazywania obiektów. Wygląda ona następująco:
$("nazwa_selektora_ktory_chcemy_pokazac").fadeIn("predkosc_pokazania")Co do prędkości to możemy użyć wartości slow, normal, fast lub podać czas trwania w milisekundach.
W praktyce wygląda to następująco.
A kod skryptu wygląda tak:
$(document).ready(function(){
$("div").hide();$("a.wolno").click(function () {
$("div.tohidewolno").fadeIn("slow");
return false;
});$("a.szybko").click(function () {
$("div.tohideszybko").fadeIn("fast");
return false;
});
});fadeOut
Ta funkcja służy do ukrywania. Jedyne czym różni się od poprzedniczki to tym, ze ta ukrywa. Składnia jednak jest bliźniacza:
$("nazwa_selektora_ktory_chcemy_ukryć").fadeOut("predkosc_ukrywania")Nawet przykład użyjemy podobny. Tylko nie będziemy na początku nic ukrywać oraz zastąpimy
fadeInnafadeOut.$(document).ready(function(){
$("a.wolno").click(function () {
$("div.tohidewolno").fadeOut("slow");
return false;
});$("a.szybko").click(function () {
$("div.tohideszybko").fadeOut("fast");
return false;
});
});A praktyka?
Praktyczne zastosowanie obu funkcji pokazałem we wcześniejszym tutorialu dotyczącym miniaturek z opisami. Tam po najechaniu na obrazek za pomocą
fadeInpokazywał się opis, a po zjechaniu z obrazka znikał on za pomocąfadeOut.fadeTo
FadeTo, w przeciwnieństwie do poprzedniczek lubi stany przejściowe. Za jej pomocą możemy sprawić, że wszystkie obrazki obrazki na stronie będą miały przezroczystość ustawioną na 50%.
Składnia tej funkcji wygląda następująco:
$(nazwa_selektora_ktoremu_chcemy_cos_zrobic).fadeTo("czas_trwania_efektu", do_jakiego_poziomu);czyli jeśli będziemu chcieli wszystkie obrazki na stronie ustawić na te 50% piszemy
$("img").fadeTo("slow", .5);Zobaczcie sami: przykład
FadeTo w praktyce
FadeToużyjemy do przyozdobienia małej galeryjki.Naszym zadaniem będzie najpierw ustawić obrazkom przezroczystość na 50%, a po najeździe przeroczystość stalić na 0.
Tak to będzie wyglądać:
$(document).ready(function() {
$("li").fadeTo("fast", .5);$("li").hover(function(){
$(this).fadeTo("fast", 1);
},function(){
$(this).fadeTo("fast", .5);
});});
Jak to działa możecie zobaczyć tutaj.
Zachęcam Was do zabawy z tymi funkcjami, bo odpowiednio połączone mogą wyglądać naprawdę efektownie, a co za tym idzie mogą upiększyć Waszą stronę.


















Komentarze / dodaj komentarz
autor: SlideUp, SlideDown, SlideToggle - wjazdy i zjazdy w jQuery | vivee.info
dodano: 17.01.2008
[...] już jak za pomocą jQuery płynnie ukrywać lub pokazywać elementy na stronie. Teraz przyszedł czas [...]
Napisz komentarz