jQuery Introduction | Effects | Animation Effects .animate()

Tags:

.animate() method

In jQuery, you can define custom effects by using the .animate() method.
The .animate() method creates new effects by using several CSS style properties.

The syntax of the .animate() method is as follows.

$(selector).animate(styles [,duration] [,easing function] [,callback function]);
  • styles: Required. Defines the CSS style properties that make up the effect.
  • duration: Passes the length of time the effect will continue.
  • easing function: Passes the speed function over time for the effect.
  • callback function: Defines the function to run after the effect has completed.

The following example changes the size of the <div> element to 200x200px and changes its opacity to 0.5 over 1 second. After completion, it displays text indicating that the animation has finished.

$("div").animate({
    width: "200px",
    height: "200px",
    opacity: 0.5
},
1000,
function() {
    $("#text").text("The animation effect has completed.");
});

Run code

.animate() method - CSS properties that can be used

The .animate() method can use almost all CSS properties except properties related to color.

In the .css() method, you can use both hyphenated CSS property names and their camelCase versions. However, in the .animate() method, only camelCase property names can be used.

The CSS properties that can be used with the .animate() method are as follows.

  • backgroundPositionX
  • backgroundPositionY
  • borderWidth
  • borderBottomWidth
  • borderLeftWidth
  • borderRightWidth
  • borderTopWidth
  • borderSpacing
  • margin
  • marginBottom
  • marginLeft
  • marginRight
  • marginTop
  • outlineWidth
  • padding
  • paddingBottom
  • paddingLeft
  • paddingRight
  • paddingTop
  • height
  • width
  • maxHeight
  • maxWidth
  • minHeight
  • minWidth
  • fontSize
  • bottom
  • left
  • right
  • top
  • letterSpacing
  • wordSpacing
  • lineHeight
  • textIndent

.animate() method - predefined values

The .animate() method can use the following predefined values as CSS property values.

  • show: Displays the element.
  • hide: Hides the element.
  • toggle: Alternates between displaying and hiding the element. In other words, it alternates between show and hide.

The following example sets the width and height property values to the predefined value “toggle”.

$("button").on("click", function(){
    $("div").animate({
        width: "toggle",
        height: "toggle",
    }, 1000);
});

Run code

.animate() method - easing function

The .animate() method can use an easing function to set the speed of the effect over time.

  • swing: Moves slowly at the beginning and end, but faster in the middle.
  • linear: Moves at a constant speed.

The following example shows the difference between swing and linear.

$("#btnStart").on("click", function(){
  $(".bar").stop().animate({
    width: "400px"    // Sets the CSS width property value to "400px".
  }, 2000, "linear"); // Sets the easing function to "linear".
});
$("#btnEnd").on("click", function(){
  $(".bar").stop().animate({
    width: "1px"      // Sets the CSS width property value to "1px".
  }, 2000, "swing");  // Sets the easing function to "swing".
});

Run code