[HTML|JS|CSS] jQuery : Efekty

Kolejnym powodem, dla którego warto skorzystać z biblioteki jQuery jest proste API dla tworzenia efektów na stronie internetowej. Dzięki animacjom każdy programista może poprawić interaktywność swojej strony internetowej, dopasowując ją do najnowszych standardów wyglądu.

Pierwszą rzeczą, którą można łatwo wykonać przy użyciu jQuery jest pokazywanie / ukrywanie elementu. Służą do tego odpowiednio metody .show() oraz .hide(). Ponadto mamy do dyspozycji metodę .toggle(), która dokonuje przełączeń pomiędzy wspomnianymi stanami. Wszystkie trzy metody dokonują modyfikacji na właściwości display.

$(document).ready(function(){
 $('#showhide').click(function(){  
  if($('.image').first().css('display')=='block')
  {
   $('.image').hide();
  }
  else
  {
   $('.image').show();
  }  
 });
 $('#toggle').click(function(){
  $('.image').toggle();
 });
 });

Analogiczne operacje możemy wykonać wprowadzając nieco animacji. Efekty z grupy slide imitują efekt zwijania / rozwijania elementu, animując jego wysokość. Dla każdej z funkcji możemy podać długość animacji (w ms) oraz callback, który zostanie wywołany w momencie zakończenia animacji.

$(document).ready(function(){
 $('#slideup').click(function(){
  $('.image').slideUp(800, function() {
      console.log('animation completed');
    });
 });

 $('#slidedown').click(function(){
  $('.image').slideDown(800, function() {
      console.log('animation completed');
    });
 });

 $('#slidetoggle').click(function(){
  $('.image').slideToggle('fast', function() {
      console.log('animation completed');
    });
 });
 });

Kolejne bardzo popularne efekty to znikanie i pojawianie się, czyli manipulacja na opacity. Korzystając z jQuery możemy to załatwić w jednej linijce. Proste funkcje fadeIn oraz fadeOut z opcjonalnym callbackiem ofertują taką funkcjonalność. Dodatkowo mamy funkcje fadeToggle(przełączanie przez zanikanie / pojawianie się) oraz fadeTo, która animuje nam opacity obrazka przez zadaną ilość milisekund do zadanej wartości

$(document).ready(function(){ 

 $('#fadein').click(function(){
  $('.image').fadeIn('slow');
 })

 $('#fadeout').click(function(){
  $('.image').fadeOut(1000,function(){
   console.log('animation completed');
  });
 })

 $('#fadeto').click(function(){
  $('.image').fadeTo('slow',0.3);
 })

 });

W przypadku bardziej zaawansowanych potrzeb dostajemy do dyspozycji funkcję animate, gdzie możemy podać, które właściwości chcemy animować, do jakiej wartości docelowej, oraz standardowo czas trwania i callback. Animacja wielu właściwości zostanie wykonana jednocześnie.

$(document).ready(function(){

 $('#animate').click(function(){
  $('.image').animate({
      opacity: 0.25,
      width: '+=50',
      height: '30px'
    }, 5000, function() {
      console.log('animation completed')
    });
 });

 });

Jeżeli zachodzi potrzeba, aby animacje wykonywały się sekwencyjnie można wywoływać je jedna po drugiej w jednej linijce. Api jQuery zapewnia taką wygodę dla programisty, co znacznie redukuje ilość kodu. Pomiędzy kolejnymi animacjami można wprowadzać opóźnienia, przy użyciu funkcji .delay()

$(document).ready(function(){

 $('#delay').click(function(){
  $('.image').slideUp('slow').delay(1500).slideDown('slow');
 });
 });