Custom animation using jQuery in ASP.NET

Here we discuss about the jQuery animate() method which performs a custom animation of a set of CSS properties.
  • 2571
 
The jQuery animate() method performs a custom animation of a set of CSS properties. This method is similar to one that can changes an element from one state to another with CSS styles. The CSS property value is changed gradually, to create an animated effect with numeric values like "margin:50px" and not for string values like background color etc.

Syntax


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

Here is an example to animate two divs individually or together to show how an unqueued animation works.

<html>
<
head>
<
title>jQuery Custom Animaion</title>
  <style>
    div
    {
      background-color:#bca;
      width:200px;      height:2.4em;
      text-align:center;
      border:2px solid purple;
      margin:3px;
      font-size:14px;
    }
button {font-size:14px;}
   .style1
   {
      color: #9F009F;
   }
  </style>  <script src="jquery.js"></script>
</head>
<
body>
  <button id="butn1" style="font-family: Verdana; font-size: small">» Animate Div1</button>
  <button id="butn2" style="font-family: Verdana; font-size: small">&raquo; Animate Div2</button>
  <button id="butn3" style="font-family: Verdana; font-size: small">&raquo; Animate Both</button>
 
<button id="butn4" style="font-family: Verdana; font-size: small">&raquo; Reset</button>
  <br /><br />
    <div id="block1" class="style1" 
        style="background-color: #FFE8E8; font-family: Verdana; font-size: small; font-weight: bold;"><strong>I am the 
        first Div</strong></div>
    <div id="block2" class="style1" 
        style="background-color: #FFE8E8; font-family: Verdana; font-size: small; font-weight: bold;"><strong>I am the 
    second Div</strong></div>
<script>
    $("#butn1").click(function () {
        $("#block1").animate({ width: "90%" }, { queue: false, duration: 3000 })
     .animate({ fontSize: "24px" }, 1500)
     .animate({ borderRightWidth: "15px" }, 1500);
    });
    $("#butn2").click(function () {
        $("#block2").animate({ width: "90%" }, 1000)
     .animate({ fontSize: "24px" }, 1000)
     .animate({ borderLeftWidth: "15px" }, 1000);
    });
    $("#butn3").click(function () {
        $("#butn1").add("#butn2").click();
    });
    $("#butn4").click(function () {
        $("div").css({ width: "", fontSize: "", borderWidth: "" });
    });
</script> 
</body>
</
html>

Output

animation1.gif

Now we click on the second button which expands the div size to 90% width with increased font-size and border animation as shown in below figure. Do same with the first button and animate both div together with the third button and then reset them.
animation2.gif
 

Categories

More Articles

© 2020 DotNetHeaven. All rights reserved.