FadeIn, fadeOut, fadeTo – czyli o pojawianiu się i znikaniu | Vivee - wordpress, webmastering, grafika i fotografia

data publikacji: 04.12.2007
FadeIn, fadeOut, fadeTo – czyli o pojawianiu się i znikaniu
kategoria: Skrypty client-side, Tutoriale, Webmaster autor: palmiak
W tym tutorialu pokażę Wam jak działają trzy efektowne funkcje jQuery, czyli fadeIn(), fadeOut oraz fadeTo(). 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 fadeIn na fadeOut.

$(document).ready(function(){
$("a.wolno").click(function () {
$("div.tohidewolno").fadeOut("slow");
return false;
});

$("a.szybko").click(function () {
$("div.tohideszybko").fadeOut("fast");
return false;
});
});

Przykład

A praktyka?

Praktyczne zastosowanie obu funkcji pokazałem we wcześniejszym tutorialu dotyczącym miniaturek z opisami. Tam po najechaniu na obrazek za pomocą fadeIn pokazywał 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

FadeTo uż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ę.
Udostępnij ten artykuł:
Zobacz podobne wpisy:

None Found
9912 Responses2007-12-03+23%3A05%3A02palmiak to “FadeIn, fadeOut, fadeTo – czyli o pojawianiu się i znikaniu”
1. SlideUp, SlideDown, SlideToggle - wjazdy i zjazdy w jQuery | vivee.info pisze:
  
  17 01 2008 o 02:23
  
  [...] już jak za pomocą jQuery płynnie ukrywać lub pokazywać elementy na stronie. Teraz przyszedł czas [...]
  
  Odpowiedz
2. mateo pisze:
  
  8 06 2009 o 14:32
  
  chciałbym na swoim blogu [wordpress] wykorzystać funkcje FadeTo. Pytanie – gdzie mam zamieścić kod do niej? W jakim pliku?
  
  Odpowiedz
3. agressiva pisze:
  
  8 06 2009 o 14:58
  
  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
  
  Odpowiedz
4. mateo pisze:
  
  8 06 2009 o 15:09
  
  dałem odnośnik taki: wp-includes/js/jquery/jquery.js i nie działa
  
  Odpowiedz
5. mateo pisze:
  
  8 06 2009 o 15:21
  
  stwaorzyłem plik w głownym katalogu, wiec dałem header:
  
  ale nadal nie działa:(
  
  Odpowiedz
6. mateo pisze:
  
  8 06 2009 o 15:22
  
  to dałem:
  
  Odpowiedz
7. agressiva pisze:
  
  8 06 2009 o 15:26
  
  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.
  
  Odpowiedz
8. mateo pisze:
  
  8 06 2009 o 15:39
  
  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,
  
  Odpowiedz
9. agressiva pisze:
  
  8 06 2009 o 15:54
  
  <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.
  
  Odpowiedz
10. mateo pisze:
  
  8 06 2009 o 16:06
  
  nie wiem co grane:( nie działa. mogłabys sie odezwac do mnie na GG: 5120702
  pozdr.
  
  Odpowiedz
11. mateo pisze:
  
  8 06 2009 o 17:27
  
  zrobiłem wszystko jak radzisz, ale nadal nic. prosze odezwij sie na GG lub mejla..bardzo mi na tym zależy.
  
  Odpowiedz
12. marsjaninzmarsa pisze:
  
  23 06 2010 o 21:23
  
  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ę?
  
  Odpowiedz
Leave a Reply

Name (required)

Mail (will not be published) (required)

Website

Powiadom mnie o nowym komentarzu do tego artykułu.

Top 10

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.

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