jQuery Animation

/

This tutorial will help you to learn how to put animation effects using jQuery. The post is created in a way that jQuery Animation will be so easy to do.

jQuery Animation

jQuery animate() Method

The jQuery animate() method is used to create custom animations. The animate() method is typically used to animate numeric CSS properties, for example, width, height, margin,padding, opacity, top, left, etc. but the non-numeric properties such as color orbackground-color cannot be animated using the basic jQuery functionality.

Get started with jQuery Animation Codes

 

Note: Not all CSS properties are animatable. In general, any CSS property that accepts values that are numbers, lengths, percentages, or colors is animatable. However, the color animation is not support by the core jQuery library. To manipulate and animate the color use the jQuery color plugin.

Syntax

The basic syntax of the jQuery animate() method can be given with:

$(selector).animate({ properties }, duration, callback);

The parameters of the animate() method have the following meanings:

  • The required properties parameter defines the CSS properties to be animated.
  • The optional duration parameter specifies how long the animation will run. Durations can be specified either using one of the predefined string 'slow' or 'fast', or in a number of milliseconds; higher values indicate slower animations.
  • The optional callback parameter is a function to call once the animation is complete.

Here’s a simple example of the jQuery animate() method that animates an image from its original position to the right by 300 pixels on click of the button.

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Example of jQuery Animation Effects</title>
<script src="https://code.jquery.com/jquery-1.11.3.min.js"></script>
<style type="text/css">
    img{
        position: relative; /* Required to move element */
    }
</style>
<script type="text/javascript">
$(document).ready(function(){
    $("button").click(function(){
        $("img").animate({
            left: 300
        });
    });
});
</script>
</head>
<body>
    <button type="button">Start Animation</button>
    <p>
    <img src="https://techTutorialsOnline.com/wp-content/uploads/2015/09/100-by-119-1.png" alt="techTutorialsOnline">
    </p>
</body>
</html>

Note:All HTML elements have static position by default. Since the static element cannot be moved, so you must set the CSS position property for the element torelative, fixed, or absolute to manipulate or animate its position.

Animate Multiple Properties At Once

You can also animate multiple properties of an element together at the same time using theanimate() method. All the properties animated simultaneously without any delay.

<script type="text/javascript">
$(document).ready(function(){
    $("button").click(function(){
        $(".box").animate({
            width: "300px",
            height: "300px",
            marginLeft: "150px",
            borderWidth: "10px",
            opacity: 0.5
        });
    });
});
</script>

Note: The CSS properties names must be camel-cased when using with theanimate() method, e.g. if you want to animate the font size you need to write'fontSize' rather than 'font-size'. Similarly, write 'marginLeft' instead of'margin-left', 'borderWidth' instead of 'border-width', and so on.

Animate Multiple Properties One by One or Queued Animations

You can also animate the multiple properties of an element one by one individually in a queue using the jQuery’s chaining feature. We’ll learn more about chaining in next chapter.

The following example demonstrates a jQuery queued or chained animation, where each animation will start once the previous animation on the element has completed.

<script type="text/javascript">
$(document).ready(function(){
    $("button").click(function(){
        $(".box")
            .animate({width: "300px"})
            .animate({height: "300px"})
            .animate({marginLeft: "150px"})
            .animate({borderWidth: "10px"})
            .animate({opacity: 0.5});
    });
});
</script>

Animate Properties with Relative Values

You can also define the relative values for the animated properties. If a value is specified with a leading += or -= prefix, then the target value is calculated by adding or subtracting the given number from the current value of the property.

<script type="text/javascript">
$(document).ready(function(){
    $("button").click(function(){
        $(".box").animate({            
            top: "+=50px",
            left: "+=50px",
            width: "+=50px",
            height: "+=50px"
        });
    });
});
</script>

Animate Properties with Pre-defined Values

In addition to the numeric values, each property can take the strings 'show', 'hide', and'toggle'. It will be very helpful in a situation when you simply want to animate the property from its current value to the initial value and vice versa.

<script type="text/javascript">
$(document).ready(function(){
    $("button").click(function(){
        $(".box").animate({
            width: 'toggle'
        });
    });
});
</script>

This is the tutorial for jQuery Animation. If you have any question relating the concept, you may raise a question in or Forum Section