ARTICLE

Create Custom animation using jQuery in ASP.NET

Posted by Sapna in Articles | ASP.NET using VB.NET on February 28, 2011

Tags: jQuery, jQuery Tutorials, jQuery Articles, jQuery in ASP.NET, jQuery Animate method, jQuery Custom Animation

Here we discuss about the jQuery animate() method which performs a custom animation of a set of CSS properties.

Tweet
1223
0

Download Files:

CustomAnimation.zip

Reader Level: Beginner

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.

Now animate both together and reset the page.

post comment

TOP LEADERS

View All

TRENDING UP

Use of Excel.AddUnique Method in MS Excel to Display Unique Numbers in Ranges Use of PPT.ApplyTheme.BackgroundStyle in MS PowerPoint 2010 to Apply Themes & Backgrounds Use of PPT.InteractWithChartLocation in MS PowerPoint 2010 to Change Chart Locations Simple Web Report With Pivot Table and Linq to Entity Print A Chart into a Byte Stream Using New Audio Player Class With VB.NET Display Top Ten Percent Item and bottom Ten percent Item Use of PPT.ConvertTextToSmartArt in MS PowerPoint 2010 to Convert Text into SmartArt How to Find Backup Folder Data Location Using GetSpecialLocation in MS OneNote 2010 Calendar Control In WPF

View All

Sponsored by

Become a Sponsor

MOST LIKED ARTICLE

Web based Chat application in VB.NET Scroll text using timer in VB.NET Input Controls in ASP.Net Finding the first and last day of the month in VB.NET Loading a Form Icon in VB.NET

PREMIUM SPONSORS

Introducing MaxV - one click. infinite control. Hyper-V Hosting from MaximumASP.

Finally – a virtual platform that delivers next-generation Windows Server 2008 Hyper-V virtualization technology from a managed hosting partner you can truly depend on. Visit www.maximumasp.com/max for a FREE 30 day trial. Hurry offer ends soon. Climb aboard the MaxV platform and take advantage of High Availability, Intelligent Monitoring, Recurrent Backups, and Scalability – with no hassle or hidden fees. As a managed hosting partner focused solely on Microsoft technologies since 2000, MaximumASP is uniquely qualified to provide the superior support that our business is built on. Unparalleled expertise with Microsoft technologies lead to working directly with Microsoft as first to offer IIS 7 and SQL 2008 betas in a hosted environment; partnering in the Go Live Program for Hyper-V; and product co-launches built on WS 2008 with Hyper-V technology.

Nevron Chart for .NET 2010.1 Now Available

The leading .NET charting control now features PDF, Flash and Silverlight export, visualization of large datasets and more. Deliver true charting functionality to your BI, Scorecard, Presentation or Scientific apps. Download evaluation now.

Create Custom animation using jQuery in ASP.NET

Syntax

Related Articles