Niedawno klient zażądał, by jeden z elementów na jego stronie „pulsował”. Stara, dość bazarowa sztuczka robiona we Flashu, każdy zna, każdy widział. Ale nie korzystam z tej technologii, zastępuje ją jQuery, jak dotąd ani razu nie musiałem ustąpić temu pierwszemu, mimo że czasem niektóre rzeczy wymagały kombinowania i myślenia nad rozwiązaniem dłuższą chwilę.

Na szczęście w tym przypadku rozwiązanie nasunęło mi się od razu, problem pojawił się tylko z jego formą. Wiedziałem, że to musi być powtarzana w kółko sekwencja funkcji animate, w której wartość opacity będzie stopniowo spadać i się podnosić. jQuery oferuje kilka rozwiązań, ciekawą najpierw wydało mi się skorzystanie z wtyczki jQuery.timers i użycie jej funkcji everyTime, ale po chwili uznałem, że to wyważanie otwartych drzwi, i nie ma sensu angażować osobnego pluginu do jednego efektu przy jednym elemencie.

Oczywistym wydało mi się, że jQuery musi pozwalać na coś takiego, jak zapętlenie akcji. I oczywiście, po krótkim szukaniu okazało się, że tak jest, a nie wiedziałem o tym z prostej przyczyny – nigdy tego nie potrzebowałem. Do rzeczy – wystarczy napisać funkcję, nazwać ją jakoś, i przy ostatnim jej działaniu zadeklarować ponowne jej uruchomienie. Proste? Proste! Przykład kodu:

  1. function opac() {
  2. $('div.opacity').animate({opacity: 0.75},500);
  3. $('div.opacity').animate({opacity: 0.5},500,opac);
  4. }
  5. opac();

Zrobiłem to, co opisałem, na końcu, w piątej linijce wywołując funkcję. Oczywiście kod jest bardzo uproszczony, ale istota została niezmieniona. W podobny sposób można tworzyć bardziej skomplikowane animacje, a nawet sceny kreskówek! Zachęcam do eksperymentowania, a może znacie lepszy sposób na osiągnięcie efektu przedstawionego tutaj?