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.
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">» Animate Div2</button>
<button id="butn3" style="font-family: Verdana; font-size: small">» Animate Both</button>
<button id="butn4" style="font-family: Verdana; font-size: small">» 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
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.