Using jQuery to Implement Animations in ASP.NET | 2 | WebReference

Using jQuery to Implement Animations in ASP.NET | 2


[prev]

Using jQuery to Implement Animations in ASP.NET [con't]

Implementing Animations Using jQuery

You can use jQuery to animate a <HTML> element easily by using the .animate() method and passing the necessary parameters to it. In this example, we'll use the .animate() method in jQuery to demonstrate text animation. To implement a demo application for this example, follow these steps:

  1. Create a new ASP.NET project in Visual Studio 2008 or Visual Studio 2010.
  2. Save it with a name.
  3. Open the Default.aspx file.
  4. Drag and drop the jQuery library file onto your WebForm.

    This will create the following reference:



  5. Take two Button controls: one for starting animation and the other for resetting it. Here is what the markup code for the Button controls would look like:


  6. Create a <div> and place some text inside it as shown below:


  7. In the document.ready() function, write code as shown below to animate the text inside the <div> you just created:

And, you are done! When you execute the application, you'll see two button controls and the text "Welcome to jQuery!" displayed in the browser. When you click on the Animate button, the text is enlarged and animated. On click of the Reset button, the same text is reset to its original size and style.

The Complete Source Code

Here is the complete source (markup code) of the Default.aspx file:

Summary

In this article, I discussed animations using jQuery. In the future articles, I will take a look at the other powerful features of the jQuery library.

Original: June 30, 2010


[prev]