jQuery Api Animate() Effect Method Example

jQuery Animate () Method – how to use this method with html selected html elements .Here you will learn how to create animation effect using jQuery.

jQuery Animate () Effect

The jQuery animate () method is used to create custom animations. Animate the method execute a custom animation by modifying a set of CSS properties on the selected html element.
The animate () method is used for modify the numerical CSS properties of selected HTML elements (i.e. width, height, margin, padding, opacity, top, left).

This method changes the designated CSS properties gradually by increasing or decreasing the value of the property, it can also be modified.

Syntax

 (selector).animate({styles},speed,easing,callback)

Parameters of animate method

  • speed :- The argument ‘speed‘ determines the duration of this effect.
  • easing :- It specifies the easing function to be used for transition.
  • callback :- Ihis is an optional parameter. you can specify what to do after the animate() is complete.

All the Styles property of jquery animate()

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

jQuery animate() example

In the below example you can see that animate() method effect. Animate () method of jQuery that animates an image from the original position with 400 pixels on the right click button.

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>jQuery Animation Effects</title>
<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script> 
<style type="text/css">
    img{
        position: relative;
        height: 200px;
        width: 300px;
    }
</style>
<script type="text/javascript">
$(document).ready(function(){
    $("#start").click(function(){
        $("img").animate({
            left: 300
        });
    });
});
</script>
</head>
<body>
    <button type="button" id="start">Start Animation</button>
    <p>
    	<img src="https://www.tutsmake.com/wp-content/uploads/2019/04/jquery-slidetoggle-animation.jpeg" alt="animate">
    </p>
</body>
</html>                            

Example Animate Multiple Properties

You can animate various properties of a selected HTML element using the animate () method at the same time.

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Example of jQuery Multiple Properties Animation</title>
<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script> 
<style type="text/css">
    .box_body{
        width: 120px;
        height: 100px;
        background: #9d7ede;
        margin-top: 35px;
        border-style: solid; 
        border-color: #6f40ce;
    }
</style>
<script type="text/javascript">
$(document).ready(function(){
    $("#start").click(function(){
        $(".box_body").animate({
            width: "350px",
            height: "350px",
            marginLeft: "160px",
            borderWidth: "12px",
            opacity: 0.5
        });
    });
});
</script>
</head>
<body>
    <button type="button" id="start">Start Animation</button>
    <div class="box_body"></div>
</body>
</html>                            

jQuery animate() – Using Pre-defined Values

You can specify the animation value of a property, each property can take string ‘show’, ‘hide’ and ‘toggle’.

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Example of jQuery Multiple Properties Animation</title>
<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script> 
<style type="text/css">
    .box_body{
        width: 120px;
        height: 100px;
        background: #191970;
        margin-top: 35px;
        border-style: solid; 
        border-color: #6f40ce;
    }
</style>
<script type="text/javascript">
$(document).ready(function(){
    $("#start").click(function(){
        $(".box_body").animate({
            height: 'toggle',
        });
    });
});
</script>
</head>
<body>
    <button type="button" id="start">Start Animation</button>
    <div class="box_body"></div>
</body>
</html>                            

Animate Multiple Properties or Queued Animations

In this example a jQuery queue or chained animation, where each animation will begin after the last animation on the html element is complete.

<!DOCTYPE html>
<html>
<head>
<title>jQuery animate() - Uses Queue Functionality</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<style>
    .box_body{
        background:#191970;
        height:100px;
        width:100px;
        position:absolute;
        margin-top: 35px;
        border-style: solid; 
        border-color: #6f40ce;
    }
</style>
<script> 
$(document).ready(function(){
  $("#start").click(function(){
    var div = $(".box_body");
    div.animate({height: '300px', opacity: '0.4'}, "slow");
    div.animate({width: '300px', opacity: '0.8'}, "slow");
    div.animate({height: '100px', opacity: '0.4'}, "slow");
    div.animate({width: '100px', opacity: '0.8'}, "slow");
  });
});
</script> 
</head>
<body>

<button id="start">Start Animation</button>

<div class="box_body"></div>

</body>
</html>

Spread the love

Be First to Comment

Leave a Reply

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