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:
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:
propertiesparameter denotes the CSS properties attached to the element on which the animation would occur.
callbackdenotes the function that would be invoked when the animation is complete.
easingparameter 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.
durationparameter 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
-= 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
The following code snippet illustrates how you can implement a fade effect when you hover over an image: