tomek.buszewski.com

Nie­dawno klient zażą­dał, by jeden z ele­men­tów na jego stro­nie „pul­so­wał“. Stara, dość baza­rowa sztuczka robiona we Fla­shu, każdy zna, każdy widział. Ale nie korzy­stam z tej tech­no­lo­gii, zastę­puje ją jQu­ery, jak dotąd ani razu nie musia­łem ustą­pić temu pierw­szemu, mimo że cza­sem nie­które rze­czy wyma­gały kom­bi­no­wa­nia i myśle­nia nad roz­wią­za­niem dłuż­szą chwilę.

Na szczę­ście w tym przy­padku roz­wią­za­nie nasu­nęło mi się od razu, pro­blem poja­wił się tylko z jego formą. Wie­dzia­łem, że to musi być powta­rzana w kółko sekwen­cja funk­cji animate, w któ­rej war­tość opacity będzie stop­niowo spa­dać i się pod­no­sić. jQu­ery ofe­ruje kilka roz­wią­zań, cie­kawą naj­pierw wydało mi się sko­rzy­sta­nie z wtyczki jQuery.timers i uży­cie jej funk­cji everyTime, ale po chwili uzna­łem, że to wywa­ża­nie otwar­tych drzwi, i nie ma sensu anga­żo­wać osob­nego plu­ginu do jed­nego efektu przy jed­nym elemencie.

Oczy­wi­stym wydało mi się, że jQu­ery musi pozwa­lać na coś takiego, jak zapę­tle­nie akcji. I oczy­wi­ście, po krót­kim szu­ka­niu oka­zało się, że tak jest, a nie wie­dzia­łem o tym z pro­stej przy­czyny — nigdy tego nie potrze­bo­wa­łem. Do rze­czy — wystar­czy napi­sać funk­cję, nazwać ją jakoś, i przy ostat­nim jej dzia­ła­niu zade­kla­ro­wać ponowne jej uru­cho­mie­nie. Pro­ste? Pro­ste! Przy­kł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();

Zro­bi­łem to, co opi­sa­łem, na końcu, w pią­tej linijce wywo­łu­jąc funk­cję. Oczy­wi­ście kod jest bar­dzo uprosz­czony, ale istota została nie­zmie­niona. W podobny spo­sób można two­rzyć bar­dziej skom­pli­ko­wane ani­ma­cje, a nawet sceny kre­skó­wek! Zachę­cam do eks­pe­ry­men­to­wa­nia, a może zna­cie lep­szy spo­sób na osią­gnię­cie efektu przed­sta­wio­nego tutaj?