jQuery动画 - fadeIn fadeOut图像和标题？

Question

我必须在JavaScript文件中添加语句，使文件淡出，并在一秒的时间内将图像淡出。此外，我需要在语句中添加一个回调函数，在单击一个图像时淡出图像。

我认为我的代码应该正常工作，但在浏览器中它没有做任何事情。我做错了什么或者有其他方法可以做到这一点？任何建议都表示赞赏！

＆＃13;

＆＃13;

$(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

＆＃13;

<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>	

＆＃13;

＆＃13;

＆＃13;

Answer 1

您需要在});后的第25行删除$(document).ready(function() {（正在关闭setInterval(..., 3000);）。

这些行：

    3000);
    });    // remove

工作版本：

$(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>