Stwórz efekt płynnego przejścia między dwoma obrazkami wykorzystując Framework jQuery!
Potęga biblioteki jQuery leży w składni, która umożliwia stworzenie efektownych animacji dosłownie w parę chwil. W niniejszym artykule pokażę jak stworzyć efekt płynnego przejścia między dwoma obrazkami, wywołany przez najechanie kursorem (akcja: MouseOver).
Efekt można wykorzystać na wiele sposobów – np. jako interaktywny banner (jak np. na stronie ) czy przycisk imitujący technologię flash. Ja postanowiłem w demo użyć skryptu jako tzw. efekt „before / after”, czyli mechanizm, który wyświetla dany obrazek przed edycją i po (przydatny na portalach traktujących o grafice).
Po pierwsze przydatne będą nam dwa obrazki. Dla dobrego efektu najlepiej będzie jeśli będą one do siebie podobne, a wręcz prawie identyczne.
Postanowiłem, dla celów pokazowych, przygotować dwie poniższe grafiki:
Jak można zauważyć, kot różni się wielkością oczu.
Struktura HTML
Teraz kiedy mamy już przygotowaną grafikę możemy pisać kod. Zaczniemy oczywiście od kodu HTML, w którym w sekcji <head> podłączymy bibliotekę jQuery:
<html><head> <title>Efekt</title> <script type="text/javascript" src="jquery.js"></script> <script type="text/javascript"> $(function(){ // tutaj będzie kod jquery }); </script></head>
Natomiast w sekcji body umieścimy dwa, przygotowane wcześniej obrazki:
<body> <img src="1.jpg" alt=”obrazek nad”/> <img src="2.jpg" alt=”obrazek pod”/></body>
Stylowanie elementów w jQuery
W zasadzie moglibyśmy teraz dodać style standardowo w CSS, jednak jest to doskonały moment, żeby pokazać alternatywne stylowanie w jQuery (które oczywiście ostatecznie i tak jest konwertowane do stylów CSS). Potrzebne będą tylko dwie linijki w sekcji head, w miejscu przygotowanym wcześniej:
$(function(){ $('img:first').css('position', 'absolute'); $('img:last').css({'position' : 'absolute', 'z-index' : '-1'});});
Powyższy kod sprawia, że obrazek podany jako pierwszy będzie znajdował się nad obrazkiem drugim (czyli dokładnie tak, jakbyśmy położyli zdjęcie pierwsze na zdjęcie drugie). Jeśli chcemy zmienić kolejność, możemy to najprościej zrobić w kodzie HTML.
Dodawanie akcji hover (mouseover)
Jedyne co nam teraz pozostało (tak! to już prawie koniec), to dodać magię jQuery, która sprawi, że obrazek wierzchni będzie w płynny sposób pojawiał się i znikał (w zależności od pozycji kursora).
Tak się składa, że omawiany javascriptowy framework posiada specjalną metodę, która bardzo ułatwi nam to zadanie – owa metoda nazywa się hover. Jej działanie opisuje poniższy nagłówek:
$(selektor).hover(funkcja mousein, funkcja mouseout);
Mówiąc najprościej powyższa metoda pozwala dla wybranego przez selektor obiektu przypisanie akcji na najechanie kursorem i akcji jej przeciwnej (czyli przesunięcie kursora poza obszar obiektu wybranego przez selektor).
Poniższy kod dobrze ilustruje działanie wyżej opisywanej metody.
$(function(){ $('img:first').css('position', 'absolute'); $('img:last').css({'position' : 'absolute', 'z-index' : '-1'}); $('img').hover(over, out); function over() { } function out() { } });
Oczywiście zarówno funkcja out jak i funkcja over w swojej obecnej postaci nie wykonują nic – możemy to szybko zmienić dopisując odpowiednio efekt płynnego zanikania oraz pojawiania się (animacja przeźroczystości). Wartość 500 oznacza, że całość powinna wykonać się w czasie pół sekundy – możemy zmieniać tę wartość wedle uznania. Kod brakujących funkcji:
function over() { $('img:first').animate({ opacity: 0.0}, 500 ); } function out() { $('img:first').animate({ opacity: 1.0 }, 500 ); }
… i to już wszystko. Te kilkanaście linijek wystarczy aby efekt zadziałał poprawnie. Poniżej znajduje się listing całości:
<html><head> <title>Efekt</title> <script type="text/javascript" src="jquery.js"></script> <script type="text/javascript"> $(function(){ $('img:first').css('position', 'absolute'); $('img:last').css({'position' : 'absolute', 'z-index' : '-1'}); $('img').hover(over, out); function over() { $('img:first').animate({ opacity: 0.0}, 500 ); } function out() { $('img:first').animate({ opacity: 1.0 }, 500 ); } }); </script></head><body> <img src="1.jpg" /> <img src="2.jpg" /></body></html>
Mam nadzieję, że efekt się spodobał – w razie problemów, proszę pytać w komentarzach. Odsyłam też do przebudowanej przy okazji wydania wersji 1.4.x dokumentacji pod adresem .
