Carousel Animation and Image Swap

Part A: Image Swap Effects

In this exercise, you will modify the Image Swap application of chapter 5 so it uses effects to display and hide the images. The code for that application is posted with the assignment. The screen looks as follows see image.

1.Add statements to the JavaScript file that fade the caption and image out over a duration of one second.

2.Modify the statements that display the new caption and image so the caption and image are faded in over a duration of one second. However, when you run the application with those changes you should see that it doesnt work in the way expected; instead, the new caption and image are displayed and then faded out and back in.

3.So: add a callback function to the statement that fades out the image. Then, move the statements that display the new caption and image within this function. (Now, the old caption and image should fade out and the new caption and image should fade in as expected).

Part B: Carousel Animation

In this exercise, you will modify a carousel application so that when an image in the carousel is clicked, an enlarged image is displayed using animation. The starter carousel application is posted with this assignment. The screen is as follows: see image.

(When you run the starter application you will note that only the first book has an enlarged image displayed).

1.Notice that the application contains an img element with an id of image following the heading. Also notice that the href attributes of the < a > elements in the carousel are set to the URL of the enlarged image to be displayed when the associated carousel image is clicked.

2.Code an event handler for the click event of the < a > elements in the list. This event handler should start by getting the URL for the image to be displayed. Then, it should assign this URL to the enlarged image.

3.Add animation to the click event handler so the opacity of the current image is set to 0 and 205 is subtracted from the left margin of the image over a period of 1 second. Use a callback function to reverse this animation. This function should also contain the statement that sets the URL for the enlarged image. The effect should be for the current image to fade out as it slides to the left, and then for the new image to fade in as it slides to the right.