Imagine that you have an element (or a set of elements) that you'd like to fade in and out from a web page. We can use the fade() method, in conjunction with event listeners, to make this happen with very few lines of code. This can be used for simple hide and show interactions, much like in the earlier example in this chapter with FAQ's.
We'll be fading an image in and out of a web page. We use a click event on a link to trigger the animation. For the image, we'll use an image from my Flickr account: http://www.flickr.com/photos/31288116@N02/3380520852/in/set-72157615731243219/.
We'll use two sizes of the images, one small and one big. The small one, when clicked, will fade in the bigger image, much like in thumbnail galleries. To download the small image, visit this link: http://farm4.static.flickr.com/3636/3380520852_5494538698_s_d.jpg
Download the large image using this link: http://farm4.static.flickr.com/3636/3380520852_5494538698_d.jpg
Store...