jQuery Animation - fadeIn fadeOut images and titles?

Question

I must add statements to the JavaScript file that fade the caption and image out over a duration of one second. Also, I need to add a callback function to the statement that fades out the image when one is clicked.

I think my code should be working, but it does not do anything when in the browser. What am I doing wrong or is there another way to do this? Any suggestion are appreciated!

 $(document).ready(function() { // preload images(given three lines) var swappedImage, imageCounter = 0, imageCache = []; $("#image_list a").each(function() { swappedImage = new Image(); swappedImage.src = $(this).attr("href"); swappedImage.title = $(this).attr("title"); imageCache[imageCounter] = swappedImage; imageCounter++; }); //start slide show imageCounter = 0; var nextImage; setInterval( function() { $("#caption").fadeOut(1000); $("#image").fadeOut(1000, function() { imageCounter = (imageCounter + 1) % imageCache.length; nextImage = imageCache[imageCounter]; $("#caption").text(nextImage.title).fadeIn(1000); } ); }, 3000); // set up event handlers for links (given line) $("#image_list a").click(function(evt) { imageCounter = (imageCounter + 1) % imageCache.length; nextImage = imageCache[imageCounter]; //given two lines var imageURL = $(this).attr("href"); $("#image").attr("src", imageURL); fadeIn(1000); //given two lines var caption = $(this).attr("title"); $("#caption").text(caption); fadeIn(1000); // cancel the default action of the link (given line) evt.preventDefault(); }); // end click // move focus to first thumbnail (given line) $("li:first-child a").focus(); }); // end ready 

 <main> <h1>Ram Tap Combined Test</h1> <ul id="image_list"> <li><a href="images/h1.jpg" title="James Allison: 1-1"> <img src="thumbnails/t1.jpg" alt=""></a></li> <li><a href="images/h2.jpg" title="James Allison: 1-2"> <img src="thumbnails/t2.jpg" alt=""></a></li> <li><a href="images/h3.jpg" title="James Allison: 1-3"> <img src="thumbnails/t3.jpg" alt=""></a></li> <li><a href="images/h4.jpg" title="James Allison: 1-4"> <img src="thumbnails/t4.jpg" alt=""></a></li> <li><a href="images/h5.jpg" title="James Allison: 1-5"> <img src="thumbnails/t5.jpg" alt=""></a></li> <li><a href="images/h6.jpg" title="James Allison: 1-6"> <img src="thumbnails/t6.jpg" alt=""></a></li> </ul> <h2 id="caption">James Allison: 1-1</h2> <p><img src="images/h1.jpg" alt="" id="image"></p> </main> 

Answer 1

You need to remove the }); (which is closing $(document).ready(function() { ) after the setInterval(..., 3000); , at line 25.

These lines:

    3000);
    });    // remove

A working version:

 $(document).ready(function() { // preload images(given three lines) var swappedImage, imageCounter = 0, imageCache = []; $("#image_list a").each(function() { swappedImage = new Image(); swappedImage.src = $(this).attr("href"); swappedImage.title = $(this).attr("title"); imageCache[imageCounter] = swappedImage; imageCounter++; }); //start slide show imageCounter = 0; var nextImage; setInterval(function() { $("#caption").fadeOut(1000); $("#image").fadeOut(1000, function() { imageCounter = (imageCounter + 1) % imageCache.length; nextImage = imageCache[imageCounter]; $("#caption").text(nextImage.title).fadeIn(1000); } ); }, 3000); // set up event handlers for links (given line) $("#image_list a").click(function(evt) { imageCounter = (imageCounter + 1) % imageCache.length; nextImage = imageCache[imageCounter]; //given two lines var imageURL = $(this).attr("href"); $("#image").attr("src", imageURL); fadeIn(1000); //given two lines var caption = $(this).attr("title"); $("#caption").text(caption); fadeIn(1000); // cancel the default action of the link (given line) evt.preventDefault(); }); // end click // move focus to first thumbnail (given line) $("li:first-child a").focus(); }); // end ready 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <main> <h1>Ram Tap Combined Test</h1> <ul id="image_list"> <li> <a href="images/h1.jpg" title="James Allison: 1-1"> <img src="thumbnails/t1.jpg" alt=""></a> </li> <li> <a href="images/h2.jpg" title="James Allison: 1-2"> <img src="thumbnails/t2.jpg" alt=""></a> </li> <li> <a href="images/h3.jpg" title="James Allison: 1-3"> <img src="thumbnails/t3.jpg" alt=""></a> </li> <li> <a href="images/h4.jpg" title="James Allison: 1-4"> <img src="thumbnails/t4.jpg" alt=""></a> </li> <li> <a href="images/h5.jpg" title="James Allison: 1-5"> <img src="thumbnails/t5.jpg" alt=""></a> </li> <li> <a href="images/h6.jpg" title="James Allison: 1-6"> <img src="thumbnails/t6.jpg" alt=""></a> </li> </ul> <h2 id="caption">James Allison: 1-1</h2> <p><img src="images/h1.jpg" alt="" id="image"></p> </main>