Simple Animation Example Using jQuery

By Faruque Ahamed Mollick

Here in this tutorial, I am going to show you a simple example of jQuery animation effect. The purpose of this tutorial is to make you the sense how jQuery animation effect work. here I am going to give you simple example code which is very easy to understand.jQuery already has a method which

jQuery already has a pre-made method inside it which is very friendly and easy to create an animation easily.

jQuery has the animate() method to create custom animation. Below is the syntax for creating custom animation using jQuery animate() method:

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

The “params” in the above syntax is required which define the CSS properties to be animated. The other two parameters “speed” and “callback” are optional.

The speed is for defining the animation speed. It tells for how much time the animation will occur.

Process form value in PHP using jQuery AJAX method

The optional callback parameter is a function to be executed after the animation completes.



Below is the simple example code of jQuery animation:

<!DOCTYPE html>
<html>
<head>
  <title>jQuery Animation</title>
  <style type="text/css">
  #animate-this {
    background: rgb(14, 90, 144);
    height:95px;
    width:95px;
    position:absolute;
  }
  </style>
</head>
<body>

<button id="animate-btn">Start Animation</button>
<div id="animate-this"></div>

<script src="jquery-3.2.1.min.js"></script>
<script type="text/javascript">
//$(selector).animate({params},speed,callback);
  $(document).ready(function(){
    $("#animate-btn").click(function(){
        $("div").animate({left: '325px'});
    });
  });
</script>
</body>
</html>

After running the above code on your browser, you will see that the block is moving on the right side with animation effect. It will move 325px towards the right as we have given the left side 325px.

CSS Moving Background Image Animation – CSS3 Source Code

Now suppose, you want the animation to be held for 2 seconds. As 2 seconds is referring to 2000 milliseconds, so we use the below code in line 24:

$("div").animate({left: '325px'}, 2000);

Test it on your browser.

Leave a Reply

Your email address will not be published. Required fields are marked *