Using jQuery to Implement Animations in ASP.NET | WebReference

Using jQuery to Implement Animations in ASP.NET

By Joydip Kanjilal


[next]

JQuery is a popular open source, lightweight JavaScript library that simplifies handling events, creating animations and developing Ajax-enabled Web pages. JQuery provides a common browser API that provides cross-browser support, and it drastically reduces the amount of code you would otherwise need to write.

The striking features of jQuery include:

  • Support for browser independence: jQuery is supported by most modern browsers.
  • Support for a simplified event handling model: jQuery provides support for an excellent, easy-to-use normalized event handling model with minimal code. The jQuery event handling model is consistent across all browsers. The event object is cross browser and normalized, so one event object is always passed as a parameter to an event handler.
  • Support for seamless extensibility: jQuery provides support for seamlessly extending the core library through an easy-to-use plugin API.

This article explains how to use jQuery to implement animations in your ASP.NET Web pages with Visual Studio.

What You Need

To get started with jQuery, you should have the following installed in your system:

  1. Visual Studio 2008
  2. Visual Studio 2008 SP1
  3. jQuery Library
  4. Visual Studio 2008 jQuery Plugin

Alternatively, you can simply download and use Visual Studio 2010, which comes with in-built support for jQuery.

Creating Animations with jQuery

In jQuery, you use the .animate() method to create animation effects. This is what the signature of the .animate() method looks like:
  • The properties parameter denotes the CSS properties attached to the element on which the animation would occur.
  • The callback denotes the function that would be invoked when the animation is complete.
  • The easing parameter is a string that denotes the easing function to be used for the transition. Typically, the easing function can be used to specify the speed at which the animation would progress at a particular instant in time.
  • The duration parameter is used to denote the duration for which the animation would be displayed. A lower value indicates faster animations, while a higher value indicates slower animations. You can also use the strings "fast" or "slow" to denote faster or slower animations.

Note that every animated property should be a numeric type except for certain properties such as background color, etc. Also, each property can accept the strings "show", "hide" and "toggle" for customizing the animation. Further, the animated properties can also be relative (i.e., if you use += or -= in an animated property, it implies that the target value would be calculated by computing against the current value.

Here is a typical example of how you can use the animate() method:

The following code snippet illustrates how you can implement a fade effect when you hover over an image:

[next]