Review the script tags in the HTML file to see that this application doesn't use the slim version of the

jQuery file. That way, the jQuery effects are available to this application.

Review the code in the JavaScript file to see that it's identical to the code for the Image Swap

application in chapter $8.$ Now, run this application to see how it works.

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

second.

Modify the statements that display the new caption and image so the caption and image are faded in

over a duration of one second. Then, run the application to see that this doesn't work the way you

might expect. Instead, the new caption and image are displayed and then faded out and back in$.$

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$.$k$!$DOCTYPE $htmL>$

$ul>$

Casting $on$ the Upper Kings

$src=$alt$=>$

src$=$ images$/$casting$1.$jpg$"$ alt$=$ Image Gallery area" id$=$"image"$>$

$($:$/$ p $>$

pody $\{$

font$-$family: Arial, Helvetica, sans$-$serif;

width: $420$px;

margin: $0$ auto;

padding: $20$px;

border: $3$px solid $$ blue;

$\}$

h$1,$ h$2,$ ul$,$ p $\{$

margin: $$;

padding: $0$ ;

$\}$

h$1\{$

padding$-$bottom: $\mathrm{.}25$em;

color: $$ blue;

$\}$

h$2\{$

font$-$size: $120\%$;

padding: $.5em$;

$\}$

li $\{$

padding: $00\mathrm{.}25$em;

display: inline;

$\}$

#caption, #gallery $\{$

text$-$align: center;

$\}$ch$08>$ image$\_$gallery $>$ JS image$\_$gallery.js

$1//$ Javascript Goes here!