jQuery Animation

jQuery animation effects are used to create a custom animation. It uses CSS properties for animation.

jQuery animate() Method

The animate() method animates only numeric CSS properties such as margin, padding, opacity, top, left, height, and width. It can not animate CSS non-numeric properties such as "color" and "background-color".

Following is a jQuery animate() method general syntax:

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

Explanation of the jquery parameters:

params: This is a required parameter that specifies the numeric properties of CSS.
speed:This is an optional parameter that indicated the duration of an animation effect and it has predefined string values such as "fast", "slow", or in a number of milliseconds.
callback: It is also an optional parameter that works after the completion of the animation() method effect.

Source Code

          
            $(document).ready(function () {
  $(".btn-animation-effect").click(function () {
    $(".animated-image").animate({
      left: 300,
    });
  });
});

Try it now

Attention: Please keep in mind that every HTML has static position by default hence it can not animated. To animate HTML element, you have to change the HTML element position properties such as "relative", "absolute" or "fixed".

jQuery animate() Method Using CSS Multiple Properties

jQuery animate() method can take multiple numeric CSS properties such as margin, padding, opacity, top, left,height,width to animate HTML element.

Please keep in mind that CSS properties that are used inside the animate() method will be in the form of camel-case. If you want to animate the 'margin-left' property then you have to write "marginLeft" inside the animate() method.

Source Code

          
            $(document).ready(function () {
  $("button").click(function () {
    $(".box").animate({
      width: "200px",
      height: "200px",
      marginLeft: "250px",
      borderWidth: "10px",
      opacity: 0.8,
    });
  });
});

Try it now

jQuery animate() Method Using Relative Values

Relative value can be assigned to the CSS numeric properties by assigning += or -= in front of the value. Basically, it is relative to the element's current value.

Source Code

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

Try it now

jQuery animate() method With Predefined Value

You can also assign non-numeric string values such as 'show', 'hide', and 'toggle' to the animation property's value.

Source Code

          
            $(document).ready(function(){
$(".btn-animate").click(function(){
  $(".animate-box").animate({
    width: 'toggle'
  });
});
});

Try it now

Animation of CSS Multiple Properties One By One Or Queued Animation

Jquery's chaining features are used to animate multiple CSS numeric properties of an element one by one individual in a queue.

Source Code

          
            $(document).ready(function () {
  $(".btn-animate").click(function () {
    $(".animated-box").animate({ marginLeft: "150px" })
      .animate({ borderWidth: "5px" })
      .animate({ width: "150px" })
      .animate({ height: "150px" })
      .animate({ opacity: 0.7 });
  });
});

Try it now

jQuery Animation

jQuery animate() Method

jQuery animate() Method Using CSS Multiple Properties

jQuery animate() Method Using Relative Values

jQuery animate() method With Predefined Value

Animation of CSS Multiple Properties One By One Or Queued Animation

Web Tutorials