Animacije – jQuery Naučimo Zajedno

$.animate() metoda

Metoda .animate() omogućuje kreiranje prilagođenih animacija na HTML elementima. Možete animirati gotovo svako CSS svojstvo koje ima numeričku vrijednost.

$("#element").animate({
  left: "250px",
  opacity: 0.5,
  width: "150px"
}, 1000); // 1000ms = 1 sekunda

Primjeri animacija

Pomicanje

Animiraj poziciju elementa.

📦

$("#box").animate({left:"+=100px"});

Veličina

Animiraj širinu i visinu.

⬛

$("#box").animate({width:"+=50px"});

Prozirnost

Animiraj opacity elementa.

🔵

$("#el").animate({opacity:0});

Chaining

Niži više animacija.

🚀

$("#el").animate({left:"100px"})
          .animate({top:"-50px"});