One of the biggest advantages of jQuery is that you no longer need Flash. Flash animations were the standard on the web for several years. The problem with Flash was that the viewer needed the application installed on their local machine, and the software has had several security flaws exposed in the last few years. With CSS3 and HTML5, you can now create animations without using Adobe Flash. With jQuery, you can implement better, more secure coding for your animations.
Browser Animation
As we said, you no longer need extra software or extended browser functionality to have animation in your web pages. You can use CSS and HTML5. Before you get into jQuery animation functionality, you should understand simple animation through the browser.
One of the most basic animations you can learn is through CSS keyframes. A keyframe is used to specify that you want an animation to go from one style to another. You can set this animation to work with any HTML element, but it's usually placed with div containers or images that move across the screen.
Before you decide to create CSS3 and HTML5 animations, you should know that older browsers do not support current code for these procedures. For instance, CSS3 animations using keyframes do not work in Internet Explorer 9 or earlier. This means that you must post a message to older browser users that they won't be able to view the animations. You can detect browser versions using JavaScript to ensure that the user has the right browser version (for Chrome, Internet Explorer and FireFox) to support your animations.
Another challenge for animation coders is that syntax for Internet Explorer and other browsers such as Chrome, FireFox and Safari is different. Therefore, you need two sets of code to support animation across several browsers. Supporting only one browser eliminates much of your viewership, so it's important to support at least the major browsers on the Internet. These include Safari, FireFox, Chrome, Internet Explorer and Opera.
With that in mind, let's take a look at a sample animation that can be used to understand basic animations. We'll use a div container for the animation. The following div container code can be used with our sample animation.
<div id="sampleanimation">Sample div container.</div>
Notice that you don't need any special HTML element coding to start the animation.
The next step is to create your keyframe CSS code. The following is an example of standard keyframe code.
@keyframes divanimation {
from {background-color: white;}
to {background-color: black;}
}
In the above code, a keyframe with the name "divanimation" is created. It's this name that you will need when you define the animation code. The keyframe specifies that the animation should include a starting white background color and end with a black background. The browser handles the progression between the two colors.
We mentioned that you need two sets of code if you want to support multiple browsers. The above keyframe code covers Internet Explorer. The following code covers other browsers such as Chrome, Safari and Opera.
@margin-bottom:.0001pt"> from {background-color: white;}
to {background-color: black;}
}
Notice that this second set of code has the same name as the previous and the styles are set the same. Normally, you would only want the same effect regardless of browser type. If you placed different styles in this set of code, you would get two different animations depending on the user's browser.
The next step is to apply the "divanimation" style to your div container we defined earlier. The following CSS code applies the animation style.
div {
width: 200px;
height: 200px;
background-color: white;
animation-name: divanimation;
animation-duration: 5s;
}
In the style above, we link additional styles and the animation style with the div element. In this example, all divs will have the applied styles, but since we only have one div in place, it does not matter that we have a global style.
The first two properties set the div container's width and height in pixels. The third property sets the background color. Notice that the background color is the same as the initialized background color in the animation. This will eliminate any flashing colors or inconsistencies in your animation.
The next four properties set the animation style. Note that the "webkit" reference is for Chrome, Safari and Opera browsers. The styles that start with "animation" are for Internet Explorer. You need both of them to support different browsers. We've tied the animation style "divanimation" to each browser property to link it to the div container. You'll also notice the duration value. It's set to 5 seconds. This means that it will take the browser five seconds to animate the background color from white to black.
That's all it takes to work with browser animation. Now that you know how to add simple animation styles to your browser, you can now plug in jQuery code to animate certain properties.
Hiding and Showing Containers
If you've ever opened a website and saw an "in-browser" popup that does not open a new window, you've seen the hide and show methods available in jQuery. Bloggers and site owners use jQuery to create popups that don't open a new window on the user's desktop. The effect is done using a div container and the jQuery show and hide methods. You can also use these methods to show and hide div containers when users click a link or a button.
Let's first take a look at a container that is hidden by default using CSS styles.
<button>Open the jQuery Container</button>
<div style="display: none">This is the jQuery Popup</div>
In the code above, there is one button that contains the text "Open the jQuery Container." Then, we have a div container with a style property. The "display: none" property tells the browser to render the container in the code but not to display it to the user.
When the user opens the page in a browser, only the button displays. Next, we need the jQuery code to display the container when the user clicks the button. The following code opens the container.
<script>
$( "button" ).click(function() {
$( "div" ).show( "slow" );
});
</script>
The show method is a type of animation itself. First, you need to override the default click behavior for the button. This code shows you how to capture the button click event and override its default activity. The "function" within the click event tells the browser to use your custom function rather than default behavior. Within the click function, we have another jQuery command. The first part of the command is the selector, which we covered in the last chapter. Then, the "show" method is called. The "slow" parameter tells the show method to animate from hidden to visible slowly. The default value for the show parameter is 400 milliseconds. However, using "slow" specifies 600 milliseconds and using "fast" specifies 200 milliseconds. Just remember that smaller numbers indicate that you want the animation to happen more quickly.
You can't let the popup stay there without giving the user the option to hide it. Just like the "show" method, the "hide" method is a jQuery method that lets you animate from visible to hidden. It can be for any element on your page, but most developers how and hide div containers.
There are a number of ways you can hide a popup. In this example, we'll use another button named "hideme."
The following code uses the hide method to return the div container to its previously hidden style.
$( "#hideme" ).click(function() {
$( "div" ).hide( "slow");
});
In this example, a button with the ID of "hideme" is assumed to be on the page. We override the click event again and indicate that we want the div container to hide slowly. The "slow" timing is again used in the hide method just like the show method.
Fade In and Out
Fading in and out is another jQuery animation command similar to hide and show. Fading animates objects so that they show from visible to transparent and back again when you fade in. The differences between fading and using the show and hide methods are subtle. You can apply both animation to your containers to figure out which one you prefer on your production site.
We can use the same div container that we used in the previous section to demonstrate the way these two methods work.
<button> Open the jQuery Container </button>
<div style="display: none; background-color: blue;">This is the jQuery Popup</div>
The only difference we have with this div container is that the background is set to blue. We also have the same button that we used in the previous section. Now, we can add the jQuery code to animate the containers.
<script>
$("button").click(function(){
$("div").fadeIn("slow");
});
</script>
Notice that the code is practically the same. The only difference between the show and the fadeIn method is the fade method more slowly fades an image or container in and out. Just like the show and hide methods, you also specify either slow, fast or a value in milliseconds. The "slow" specification uses 600 milliseconds and "fast" indicates 200 milliseconds. You can also use your own integer value instead of static string values.
After you fade an element into visibility, you probably want to use the fadeOut method at some time. This method turns the element from visible to transparent. We'll assume that we have a button on the page with an ID of "hideme" again just like the previous section.
The following jQuery code fades the container to a transparent state.
$( "#hideme" ).click(function() {
$( "div" ).fadeOut( "slow");
});
Notice that again the only difference in the above code from the previous section is the fadeOut method instead of the "hide" method. FadeOut works similarly, but you must place both code snippets side-by-side to see the subtle differences. We still used the same selector types, and the same format to create a custom function that overrides the button's click event.
Sliding Up and Down
The final basic animation offered in jQuery is a sliding effect. The sliding effect lets you expand or collapse an image or container. The effect is similar to when you click a menu item and a container expands to show you additional menu items. When you stop hovering over the main menu item, the container collapses. The sliding effects in jQuery work in the same fashion.
Let's create two div containers that act like menu items that slide up and down. The following HTML code is the container objects we'll use.
<div id="main">Click to open menu.</div>
<div id="7" style="display: none;">This is a submenu item.</div>
Notice that the submenu container is set not to display, because you don't want this container to display until the user clicks the main div container.
Now, you can add the jQuery code that examples the submenu when the user clicks the main div.
<script>
$( "#main" ).click(function() {
$( "#submenu" ).slideDown( "slow");
});
</script>
In the jQuery code above, we first override the click event on the main div container. Most elements in HTML have a click event, so you can use anything to trigger a function when the user clicks various parts of your page.
In the click event function, we then have the jQuery code that uses the "slideDown" method. Again, the animation uses the "slow" parameter, but you can also use a specified numeric value or the static string value of "fast." In this example, the div container slowly expands vertically down from the main container.
After you expand the container downward, you probably want to give the user a way to collapse it upward. This is done using the slideUp method. Again, it's similar to the previous code but you use slideUp instead of slideDown. The following jQuery code shows you how to use the method.
Once again, we'll assume there is a button to collapse the menu, although you probably want to use the same div container and keep track of its current state. We'll show you how to toggle the container's state next.
The following code forces the animation to slide up.
<script>
$( "#main" ).click(function() {
$( "#submenu" ).slideUp( "slow");
});
</script>
That's all it takes to slide a container upward. As you can probably guess, it would be much easier if jQuery kept track of the container's state. The framework provides you with a "slideToggle" method. This means you only need one jQuery method to slide up and down. The following jQuery code replaces both the previous functions and collapses them into one command.
<script>
$( "#main" ).click(function() {
$( "#submenu" ).slideToggle( "slow");
});
</script>
Notice the code is the same, but the method is different. This lets you slide your containers up and down without separate buttons or keeping track of the current state of the object.
These three basic jQuery animations are used often in web pages. Before jQuery, animating basic objects on a page took several lines of JavaScript code. Now, you just need two lines of jQuery code to animate these objects.
We covered some basic animations in this article.
