Fading elements
If showing or hiding elements is not enough, jQuery provides the ability to fade HTML elements in and out. This recipe utilizes the jQuery's fade-in and fade-out functionalities to add more effect when choosing to display or hide elements.
Getting ready
Create a blank HTML file named recipe-3.html and save it in the same directory as the latest version of jQuery.
How to do it…
Use jQuery to fade DOM elements in and out by performing the following steps:
Add the following HTML code to
recipe-3.html, ensuring the reference to the jQuery library is correct:<!DOCTYPE html> <html> <head> <title>Chapter 4 :: JQuery Effects :: Recipe 3</title> <script src="jquery.min.js"></script> <script src="recipe-3.js"></script> <link type="text/css" media="screen" rel="stylesheet" href="recipe-3.css" /> </head> <body> <div class="frame"> <div class="top"> <label>Add Item:</label> ...
