środa, 14 listopada 2012

jQuery - proste animacje

Animacje na stronach to już nie tylko Flash, Silverligh czy Applet ale coraz częściej JavaScript.
jQuery udostępnia wiele gotowych animacji, jak również dostarcza prostą metodę do definiowania nowych.

Niektóre z gotowych efektów/animacji do wykorzystania:
  • show() - pokazuje element jeżeli jest ukryty
  • hide() - ukrywa element
  • toggle() - przełącznik, np przełącza daną właściwość naprzemiennie
  • slideDown() / slideUp() - efekt zjeżdżania w dół / górę
  • fadeIn() - rozjaśnianie

Aby tworzyć własne animacje, możemy skorzystać z funkcji animate():

.animate( properties [, duration] [, easing] [, complete] ) 

np.

Code:
$("mydiv").animate({ left: "100px" }, 500);

Należy przy tym pamiętać, że metoda animate działa tylko z elementami CSS które są wielkościami liczbowymi jak np. wielkość, położenie.

Bardzo fajne przykłady animacji można znaleźć na stronie http://designreviver.com/tutorials/20-easy-to-learn-jquery-animation-tutorials/
W internecie można znaleźć wiele tutoriali, pokazujących w jaki sposób tworzyć ciekawe animacje i efekty.

Brak komentarzy:

Prześlij komentarz