jQuery effects and transitions exercise

Download this page and open with Dreamweaver. Or right click and select "View Source", then cut and paste the code to Dreamweaver.

Task 1

Below is an <img /> tag with an ID of "task2". Add a <script> block to the source code of this page or create an external script file to house your jQuery code. Inside code two functions which you should name appropriately. One function should fade the image out and the other should fade the image in.

Next code two HTML <input type="button" ... /> tags, one to trigger each function from its event handler when the button is clicked. These can be added to the page from an external .js file using a combination of $(document).ready() and html() or they can be coded directly into this page.

Extension

Using the same menu code as the JavaScript stylesheets exercise, create a script which shows/hides the submenus of the menu block below when the link in the respective <h2> tag is clicked.

Unlike the JavaScript version you will need to trigger specific hide animations. In order to achieve this create a variable which keeps track of which menu is presently open. This variable needs to be reset each time a menu is opened so that the corresponding close function can be called when another menu is opened.

Use either slideDown() / slideUp() or a combination of these and fadeIn() / fadeOut() to make the menus show and hide gracefully. Adjust the speed of the transitions to suit by changing the number you pass into these functions.

It is suggested that you code two functions, one to show the submenu and one to hide it. The name of the specific submenu to be shown or hidden can then be fed to the function as a parameter.