JavaScript - framework jQuery - ciekawy efekt, funkcje fadeOut i fadeIn

DZIAŁANIE:

Kod:

Ewentualne Objaśnienia:

Oto przykład gdzie jak widać po najechaniu na obrazek stopniowo on zanika, a w jego miejsce pojawia się inny. Jak widać w kodzie istotą są dwa obrazki pozycjonowane tak aby "leżały na sobie". Kod jQuery po załadowaniu dokumentu ukrywa ostatni z nich (czyli tutaj ten drugi) co dzieje się przez kod find('img:last').hide() - znajdź ostatni element IMG i ukryj go, więc na "dzień dobry" widzimy tylko pierwszy obrazek i mamy napisane działanie dla zdarzenia hover czyli najechania na DIV, w którym znajdują się nasze obrazki. Znacie już na tyle jQuery, że z pewnością rozumiecie przedstawiony zapis - po najechaniu na naszego DIVa wyszukiwany jest w nim (odnosimy się przez $(this)) pierwszy obrazek, zaczyna on zanikać (fadeOut) oraz dzięki znanej już metodzie next odnosimy się do kolejnego obrazka, który zaczyna się stopniowa pojawiać (fadeIn). Analogicznie rzecz dzieje się w momencie zjechania myszką z naszego elementu (prev oznacza rzecz jasna element poprzedni).

Efekt przypomina znany doskonale RollOver jednak jak widać dzięki zastosowaniu jQuery dzieje się to z pewną animacją.