Computer Magic Logo
Animate Template

Friday, January 22, 2016

Published by Aristotelis Pitaridis

In order to animate an element with id equal to "ElementToAnimate" we have to write the following code.

$('#ElementToAnimate').animate({
    left: '+=100px',
    width: '50%',
    opacity: 0.25
  }, 2000, 'linear', function() {
    // function code on animation complete
});

In this example we see how to increase the value of left. We also can see how to set the value of width using a measuring unit. Finally we demonstrate how to set a numerical value for the opacity property. The value 2000 is the number of milliseconds that the animation will last. We also declare a function which will be executed when the animation has been completed.