In this tutorial, we are going explore the basics of jQuery animations for you to get prepared for advanced designs. Animations is the core functionality behind the interactive elements in web design.
The design of a website plays a major role in attracting visitors on a consistent basis. Interactive designs get more attention compared to the plain old static designs.
Technology is improving at a rapid pace to cater the advanced modern web designs. As a result, CSS3 offers the animations without the help of JavaScript. Even though CSS3 and HTML5 are improving in leaps and bounds, jQuery seems to be the popular choice for creating interactive designs.
Let’s get started!
Practical Usage of jQuery Animations
jQuery has been used widely for designing interactive elements such as sliders, menus, scrollers and so on. Before we start the animation aspects, I suggest you to have a look at the following practical implementations, which illustrates the power of jQuery animations.
- Lateral On Scroll Sliding
- Merging Image Boxes with jQuery
- Dream Night Animation
- Animate a Curtain Opening with jQuery
- Create Sliding Navigation Menu with jQuery
As a beginner, you can’t just jump into the types of designs illustrated in the preceding section. So here we are going to cover the basics of jQuery animations from the beginner’s perspective.
Introduction to Basic Animations with jQuery
Most designers have the knowledge of working with basic jQuery or JavaScript codes. Changing the visibility of an element is a common task that is included in almost every website design. We can just hide/show the element using CSS display or visibility attributes. jQuery simplifies the process by introducing two functions called hide and show. Consider the following code for showing and hiding an HTML element.
1 | $("#panel").show(); |
2 |
3 | $("#panel").hide(); |
With the preceding code, the element appears and disappears in a very limited time range. Use the following jsFiddle link to see a demo of the preceding code in action.
Ideally, we should smoothen the process of hiding and showing elements using animations to provide better user experience. jQuery provides two built-in techniques for showing and hiding elements with simple animation effect.
- Fading – Integrates a fading motion into HTML elements by changing the element’s opacity.
- Sliding – Integrates a sliding motion into HTML elements by changing the element’s height.
Let’s see how to use the above techniques to show and hide the elements with an animated effect.
jQuery encapsulates the complexity of animations by providing built-in methods to cater various tasks in web design.
Fading
Fading is mainly provided by the functions called fadeIn and fadeOut. Opacity of the element is increased by the fadeIn function and decreased by the fadeOut function. We can also pass the time interval for fading as shown in the following code.
1 | $("#panel").fadeIn("slow"); |
2 |
3 | $("#panel").fadeOut("fast"); |
We have the option of choosing slow or fast as the predefined values for the time interval . Also,we can pass the number in milliseconds to define the duration of animation. Here is the jsFiddle demo for working with fadeIn and fadeOut functions.
Sliding
Sliding functions change the height of the element instead of opacity for animating elements. Functions and syntaxes work exactly similar to fading, where slideUp is used for hiding and slideDown is used for showing elements. Following code previews the basic usage of sliding functions.
1 | $("#panel").slideDown("slow"); |
2 |
3 | $("#panel").slideUp("fast"); |
Duration parameter also works similar to the usage of fading functions. Here, you can see the actual beginning of the animations by moving the element. Consider the following URL for a demo usage of sliding functions.
Getting Started with jQuery Animate Function
Most beginners will think that building animations is a quite complex task. Definitely it’s difficult if you are doing it from scratch. jQuery encapsulates all the complexity by providing a single standalone function, which handles any type of animation. Basically, the animations will be created by altering the values of the CSS attributes. Once you get used to the jQuery animate function, building complex animations will become a simple task. Let’s get started by looking at the basic syntax of animate function.
1 | $( "#panel" ).animate({ |
2 |
3 | // CSS Properties and values |
4 |
5 | }, 5000, "linear", function() { |
6 |
7 | // Completion Handler |
8 |
9 | }); |
Preceding code illustrates the syntax for using the animate function. The first parameter contains all the CSS properties and values. The next optional parameter defines the duration of the animation. The third parameter defines the easing( animation type) and the final parameter defines an anonymous function for handling animation completion. Having looked at the basic usage, we can move into creating something practical with jQuery animations.
Animating Image Parts
In this section, we are going to look at how we can display an image by animating image parts. First, we have to split an image into smaller images. You can use the technique provided in my tutorial on Create Jigsaw Puzzle Using jQuery and PHP for splitting images.
Here, is the image that we are going to use for animation.
0 comments: