LearnKode

3 Example(s) of JQuery Animate


Description :

To manipulate the position, You need to set the CSS position property of the element. For the similar work, JQuery animate() method is used to create custom animations.


JQuery Animate Example - 1 
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.0/jquery.min.js"></script>
<script>
$(document).ready(function(){
  $(".btn1").click(function(){
    $("div").animate({
        left:'500px',
        opacity:'0.6',
        height:'250px',
        width:'250px'
        });
  });
});
</script>
</head>

<body>
        <button class="btn1">Animation</button><br><br>
    <div class="box" style="background:brown;height:100px;width:100px;position:absolute;"> </div>
    
   
</body>
</html>
Try it » Download Example »

Output

Description :

The animate() method performs a custom animation of a set of CSS properties. With the help of this example we can make the modification on the <div> element as per our requirement.


JQuery Animate Example - 2 
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.0/jquery.min.js"></script>
<script>
$(document).ready(function(){
  $(".btn1").click(function(){
    $("div").animate({
        left:'500px',
        opacity:'0.6',
        height:'250px',
        width:'250px'
       
        });
  });
});
</script>
</head>

<body>
        <button class="btn1">Animation</button><br><br>
    <div class="box" style="background:brown;height:100px;width:100px;position:absolute;border-radius: 133px"></div>
    
   
</body>
</html>
Try it » Download Example »

Output

Description :

We use jQuery animate() method to create custom animations. If you write multiple animate() calls after each other, jQuery creates an "internal" queue with these method calls. Then it runs the animate calls ONE by ONE.


JQuery Animate Example - 3 
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.0/jquery.min.js"></script>
<script>
$(document).ready(function(){
  $(".btn1").click(function(){
    var div = $("div");  
    div.animate({left: '400px'}, "slow");
    div.animate({fontSize: '3em'}, "slow");
  });
});
</script>
</head>

<body>
        <button class="btn1">Animation</button><br><br>
    <div  style="background:brown;height:200px;width:200px;position:absolute;"> Welcome</div>
    
   
</body>
</html>
Try it » Download Example »

Output