-
data publikacji: 04.12.2007
FadeIn, fadeOut, fadeTo – czyli o pojawianiu się i znikaniu
kategoria: Skrypty client-side, Tutoriale, Webmaster 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ę.
-
12 Responses to “FadeIn, fadeOut, fadeTo – czyli o pojawianiu się i znikaniu”
Leave a Reply
Komentarze
Kategorie
Top 10
hotelpalermo: Jak poprawnie osadzić Flasha w kodzie (X)HTML strony?
Michał: jQuery Cycle
Windscreen: Inspirujące strony www: wrzesień 2010
EMAAR MGF GURGAON: Query_posts, czyli jak ujarzmić loopa część 1.
Tomek: Cforms, czyli zaawansowane formularze w Wordpressie
Wypadek: FeedWordPress – czyli jak agregować RSSy
medicine forum: Query_posts, czyli jak ujarzmić loopa część 1.
get rid of inc: Query_posts, czyli jak ujarzmić loopa część 1.
pikolo: Skórka z własnym panelem administracyjnym
buy ritalin online: Query_posts, czyli jak ujarzmić loopa część 1.
- CMSy Artykuły dotyczące różnego rodzaju systemów zarządzania treścią CMS.
- Flash Podstawowe informacje pomocne przy tworzeniu animacji w Adobe Flash.
- Fotografia Samouczki dotyczące nie tylko robienia zdjęć ale też ich cyfrowej obróbki.
- Grafika Ogólnie pojęta grafika komputerowa, od inspiracji, po tworzenie layoutów oraz mniejszych form graficznych.
- Inne tutoriale wordpressowe Wszystkie inne zagadnienia dotyczące WordPressa.
- Inspiracje Inspirujące materiały graficzne z dziedziny projektowania stron www, projektów DTP, digital painting, itp.
- Obróbka zdjęć Techniki retuszu fotografii cyfrowych.
- Rysunek Tworzenie rysowanych ilustracji w Adobe Photoshop.
- Skóry do Wordpressa Darmowe oraz płatne – najlepsze skóry do WordPressa.
- Skrypty client-side
- Skrypty server-side
- Tutoriale
- Webdesign Tutoriale z zakresu projektowania stron www i grafiki użytkowej na rzecz internetu.
- Wieczór z Open Source
- Wordpress Ulubieniec naszej publiczności CMS WordPress: nowości, tricki, wtyczki, skóry i wszystko to co może przydać się przy korzystaniu z tego systemu.
- Wtyczki do Wordpressa Recenzje oraz instrukcje najbardziej popularnych i najbardziej niezbędnych pluginów do WordPressa.
- XHTML/CSS Ciekawostki z dziedziny kodowania stron www: XHTML, CSS, jQuery.
- FadeIn, fadeOut, fadeTo - czyli o pojawianiu się i znikaniu
- Kurs Flash cz.1 - podstawy
- Zastosowanie jQuery lightBox plugin
- Galeria z powiększanymi miniaturami
- Oryginalny blog na Wordpressie? Zrób go sam! cz.1
- Grafika do strony salonu samochodowego
- Kurs Flash cz.2 - pierwsze animacje / motion tween
- Oryginalny blog na Wordpressie? Zrób go sam! cz.2
- Hover - kompletny poradnik
- Zastosowanie Ajax Navigation
Najnowsze newsy
Wieczór z Open Source 2010
Jak co roku WSINF organizuje konferencję Wieczór z Open Source.
Chciałbym zaprosić was na tegoroczna konferencję Wieczór z Open Source 2010! Czytaj dalej
Grafart.org i WACOM zapraszają na konkursy!
Witam!
Myślę, że czas najwyższy nadmienić, że za niedługi czas zostanie zorganizowany pierwszy z trzech konkursów, w których główną nagrodą będą tablety firmy WACOM!
Za miejsca drugie oraz trzecie nagrodami będą kubki i koszulki firmy WACOM oraz magazyny graficzne PSD PHOTOSHOP oraz COMPUTERARTS.
Czytaj dalej
Zapraszamy na forum graficzne Graffika.pl
Każda osoba interesująca się grafiką komputerową ma czasami ochotę porozmawiać o swoich pracach, posłuchać rad, krytyki i pochwał innych osób. Idealnym miejscem na realizowanie takich potrzeb jest forum graficzne Graffika.pl.
Czytaj dalej
Polecane strony
- No bookmarks avaliable.























[...] już jak za pomocą jQuery płynnie ukrywać lub pokazywać elementy na stronie. Teraz przyszedł czas [...]
chciałbym na swoim blogu [wordpress] wykorzystać funkcje FadeTo. Pytanie – gdzie mam zamieścić kod do niej? W jakim pliku?
Jak tylko w sekscji Head podasz poprawne odnośniki to plik z tym mozesz nazwac jak tylko chcesz
Jak zerkniesz w źródło strony tego przykładu to widac wszystko http://palmiak.dot.pl/vivee_pliki/demo/fade/gallery.html
dałem odnośnik taki: wp-includes/js/jquery/jquery.js i nie działa
stwaorzyłem plik w głownym katalogu, wiec dałem header:
ale nadal nie działa:(
to dałem:
kłania się nauka template tagów ;P
przykladowa sciezka do pliu css zawartego w katalogu glownym skory
<link rel="stylesheet" href="<?php bloginfo('template_directory');?>/style.css" type="text/css" media="screen" />Dzieki
<?php bloginfo('template_directory');?>od razu bedzie namierzony katalog skóry.
heh. no mam problemy:]
mogłabyś podac mi kod jaki mam wkleić w header? plik jquery.js leży w głownym katalogu skóry.
z góry bardzo dziekuje,
<script type="text/javascript" src="<?php bloginfo('template_directory');?>/jquery.js"></script>i sam próbuj, jak ktoś za Ciebie zrobi to się nie nauczysz
Dajesz takie same odnosniki jak zawsze przy kazdej stronie tylko tutaj wrzucasz ten tempalte tag, który podałam wyzej aby WP sam mogl zlokalizowac skóre i zebys nie musial wpisywac linka bezposredniego samodzielnie.
nie wiem co grane:( nie działa. mogłabys sie odezwac do mnie na GG: 5120702
pozdr.
zrobiłem wszystko jak radzisz, ale nadal nic. prosze odezwij sie na GG lub mejla..bardzo mi na tym zależy.
W sumie prosty efekt, identyczny można mniejszym nakładem pracy uzyskać w CSS 3 (wszystkie liczące się przeglądarki już to obsługują) – może warto dopisać to, chociaż jako ciekawostkę?