animate

animate

Animate je další metoda jQuery.
Tato metoda vytváři jednoduché animace.

HTML:

<div></div>

CSS:

div { 
  background: blue; 
  width: 50px;
  height: 50px; 
}

Script:

$(document).ready(function() {
  $('div').click(function() {  
    $('div').animate({
      width: '100px',
      height: '100px',
      opacity: '0.4'
    }, 1400, 'linear');
  });
});

Číslo 1400[duration] uvádí čas animování v ms.
linear[easing] naznačuje, že animace bude plynulá.
Místo linear se dá použít ještě swing.

Prohlížeč:

Klikni na modré políčko.

zpět

Animovat lze jen omezené množství vlastností. př.: left, right, font-size...
... a to navíc jen ty s číselnou hodnotou.
Na druhou stranu fungují vcelku spolehlivě ve všech hlavních prohlížečích.