Efekty jQuery - animacja

Metoda jQuery animate() pozwala na tworzenie niestandardowych animacji.

Pokaz efektu



jQuery

jQuery - metoda animate()

Metoda jQuery animate() służy do tworzenia niestandardowych animacji.

Gramatyka:

$(selector).animate({params},speed,callback);

wymagany params Parametr definiuje CSS właściwości tworzące animację.

opcjonalny speed Parametr określa czas trwania efektu. Może przyjąć następujące wartości: "slow", "fast" lub milisekundy.

opcjonalny callback Parametr to nazwa funkcji wykonywanej po zakończeniu animacji.

Poniższy przykład pokazuje prostą aplikację metody animate(); przenosi element <div> na lewą stronę, aż właściwość left wyniesie 250 pikseli:

Przykład

$("button").click(function(){
  $("div").animate({left:'250px'});
);

Spróbuj sam

Wskazówka:Domyślnie, wszystkie elementy HTML mają statyczną pozycję i nie można ich przenieść.

Jeśli chcesz operować na pozycji, pamiętaj, aby najpierw ustawić właściwość CSS position elementu na relative, fixed lub absolute!

jQuery animate() - operacja wielu właściwości

Proszę zauważyć, że w procesie tworzenia animacji można jednocześnie używać wielu właściwości:

Przykład

$("button").click(function(){
  $("div").animate({
    left:'250px',
    opacity:'0.5',
    height:'150px',
    width:'150px'
  );
);

Spróbuj sam

Wskazówka:Czy można używać metody animate() do operacji wszystkich właściwości CSS?

Tak, prawie! Ale pamiętaj o jednej ważnej rzeczy: gdy używasz animate(), musisz używać CamelCase do nazw wszystkich właściwości, np. musisz używać paddingLeft zamiast padding-left, marginRight zamiast margin-right, itp.

Również, animacje kolorów nie są zawarte w głównej bibliotece jQuery.

Jeśli potrzebujesz tworzyć animacje kolorów, musisz pobrać wtyczkę Color Animations z jQuery.com.

jQuery animate() - użycie wartości względnych

Możesz również zdefiniować wartości względne (które są względne do bieżącej wartości elementu). Wartość musi być poprzedzona += lub -=:

Przykład

$("button").click(function(){
  $("div").animate({
    left:'250px',
    height:'+=150px',
    width:'+=150px'
  );
);

Spróbuj sam

jQuery animate() - użycie zdefiniowanych wartości

Możesz nawet ustawić wartości animacji atrybutów na "show", "hide" lub "toggle":

Przykład

$("button").click(function(){
  $("div").animate({
    height:'toggle'
  );
);

Spróbuj sam

jQuery animate() - użycie funkcji kolejki

Domyślnie, jQuery dostarcza funkcję kolejki dla animacji.

Oznacza to, że jeśli napiszesz wiele wywołań animate() po sobie, jQuery utworzy "wewnętrzną" kolejkę zawierającą te wywołania metod. Następnie uruchamia te wywołania animate w kolejności.

Przykład 1

Ukryj, jeśli chcesz wykonać różne animacje po sobie, musimy użyć funkcji kolejki:

$("button").click(function(){
  var div=$("div");
  div.animate({height:'300px',opacity:'0.4'},"slow");
  div.animate({width:'300px',opacity:'0.8'},"slow");
  div.animate({height:'100px',opacity:'0.4'},"slow");
  div.animate({width:'100px',opacity:'0.8'},"slow");
);

Spróbuj sam

Przykład 2

Poniższy przykład przenosi element <div> na prawą stronę i zwiększa rozmiar tekstu:

$("button").click(function(){
  var div=$("div");
  div.animate({left:'100px'},"slow");
  div.animate({fontSize:'3em'},"slow");
);

Spróbuj sam