Framework jQuery: Animowany efekt MouseOver

Autor: Bartek Bilicki, dodano: 03-03-2010
Kategoria: Programowanie i tworzenie

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).

 

DEMO

 

Efekt można wykorzystać na wiele sposobów – np. jako interaktywny banner (jak np. na stronie kreatywizm.pl) 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 docs.jquery.com.

 

Ocena 2.65/5 (52.97%) (458 głosów)

Komentarze:


  • Dodał: Gość data: 2010-03-12
    kolejny dobry art tego autora

  • Dodał: Gość data: 2010-03-12
    o tak, zgadzam sie i dziekuję !

  • Dodał: Yay Gree data: 2010-03-23
    nom ok, ale poruszaj szybko przy krawędzi - zapętla się i robi dziwne rzeczy - przykład nie kompletny.

  • Dodał: Gość data: 2010-03-23
    Pod Chrome też zapętla, fakt
  • nie działa :(
    Dodał: Gość data: 2010-05-28
    Witam

    chciałam zobaczyć efekt wkleiłam ten kod ( dodałam obrazki) ale nic się nie dzieje.. - co źle zrobiłam? ( kod wkleiłam na blogu)

    Efekt
    <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>


    <img src="http://webinside.pl/userfiles/1%20-%20Kopia.jpg" />
    <img src="http://webinside.pl/userfiles/2%20-%20Kopia.jpg" />



    Pozdrawiam serdecznie

  • Dodał: Bartek Bilicki data: 2010-07-18
    kod:
    <script type="text/javascript" src="jquery.js"></script>
    wskazuje lokalizacje pliku na serwerze - jeśli go nie ma skrypt nie będzie działał
  • kilka obrazków?
    Dodał: GośćBob data: 2011-01-28
    Witam,
    działa świetnie :)
    jak można zmienić kod aby była możliwość umieszczenia obok siebie kilku obrazków?

    dzięki za odpowiedz

  • Dodał: acidm data: 2011-06-04
    proponuje przed funkcja animade() dodoac stop() uniknie sie w ten sposob zapętlania,podczas wielokrotnej i szybkiej zmiany stanu
    :)

  • Dodał: Gość data: 2011-06-04
    ps
    animate() mialo byc
    heh

  • Dodał: Gość data: 2011-08-27
    Panowie, a jak zmodyfikować kod jeżeli chcemy zanimować dwa zdjęcia, a nie jedno?

    Pozdrawiam
    Paweł

  • Dodał: Gość data: 2012-06-09
    Odkopuję temat. Mam problem, chcę animować trzy przyciski na jednej podstronie tym sposobem. Tylko,że po najechaniu na jeden we wszystkich włącza się animacja,a chcę żeby to było oddzielnie dla każdego. Pozdrawiam.

  • Dodał: Gość data: 2012-07-20
    Super efekt, ale również mam problem dla trzech przycisków. Czy ktoś pomoże?

  • Dodał: Gość data: 2012-07-20
    Super efekt, ale również mam problem dla trzech przycisków. Czy ktoś pomoże?

  • Dodał: Gość data: 2016-09-19
    Po co tyle potu i jakieś obce kody kiedy samemu można to zrobić i nikt tego nie zmieni. Wystarczy dwa obrazki i ta linijka;
    <img src="2.jpg" width="300" height="300" border="0" alt="KOT" onmouseover="this.src='1.jpg'" onmouseout="this.src='2.jpg'" />

    Nie neguję scipt ale w tym przypadku i szybciej i prościej. Twój script u mnie nie działa.


Dodaj komentarz:


Temat:
Twój nick:
Komentarz:
 

Prosimy o kulturę wypowiedzi. Komentarze zawierające niecenzuralne zwroty, bądź obrażające inne osoby będą usuwane. Kod HTML w wypowiedziach jest niedozwolony. Wydawca nie odpowiada za treść komentarzy.