Repozytorium Web Developera

jQuery - animacje

jQuery - animacje

Animacje

  • show(szybkosc, funkcja_zwrotna) - pokazanie obiektu. Parametry są opcjonalne. Szybkość możemy podać zarówno słownie: "slow", "normal", "fast", lub liczbowo. Parametr f wskazuje nazwę funkcji która zostanie wywołana po zakończeniu animacji.
  • hide(szybkosc, funkcja_zwrotna) - ukrywa obiekt
  • fadeIn(szybkość, funkcja_zwrotna) - płynne pojawianie się obiektu.
  • toggle() - funkcja pokazuje lub ukrywa obiekt w zależności od danego stanu
  • fadeOut(szybkość, funkcja_zwrotna) - płynne ukrywanie obiektu.
  • fadeTo(szybkość, przezroczystość, funkcja_zwrotna) - płynne ustawienie przezroczystości do poziomu z parametru "przezroczystość"
  • slideDown(szybkość, funkcja_zwrotna) - płynne "wysunięcie" obiektu w dół
  • slideUp(szybkość, funkcja_zwrotna) - płynne "zsunięcie" obiektu w górę
  • slideToggle(szybkość, funkcja_zwrotna) - płynne "zsunięcie" obiektu w górę lub dół - w zależności od aktualnego stanu

Własne animacje

animate(animowane_wlasciwosci, czas, rodzaj_animacji, funkcja_zwrotna)
		$("#element").click(function(){
		    $("#block").animate({
		        width: "500px",
		        opacity: 0.4,
		        marginLeft: "0.6in",
		        fontSize: "3em",
		        borderWidth: "10px"
		    }, 1500 );
		});
		

Przykład 2.

		$('#element').animate(
		{
			borderTop: 20px,
			borderRight: 20px,
			borderBottom: 20px,
			borderLeft: 20px
		}
		, 1000);