用jQuery实现单击第一个按钮，令图片先淡出，然后换成另外一张图片再淡入……实现a1.gif~a9.gif这九张图片依次交替显示的效果。单击第二个按钮，页面重新加载。

好的，这是一个比较典型的 jQuery 动画效果实现，可以按照以下步骤进行：

1. HTML 部分：

<div id="image-container">
  <img src="a1.gif" id="image" />
</div>
<button id="change-btn">切换图片</button>
<button id="reset-btn">重置</button>

其中 `image-container` 是图片容器，`image` 是图片本身，`change-btn` 和 `reset-btn` 分别是切换图片和重置按钮。

2. CSS 部分：

#image-container {
  position: relative;
  width: 400px;
  height: 400px;
  overflow: hidden;
}
#image {
  position: absolute;
  top: 0;
  left: 0;
  opacity: 1;
}

其中 `image-container` 的 `position` 属性设置为 `relative`，是为了让图片的 `position` 属性设置为 `absolute` 时相对于父容器进行定位，`overflow` 属性设置为 `hidden` 是为了隐藏图片容器外部的部分。`image` 元素的 `position` 属性设置为 `absolute`，是为了让图片相对于父容器进行定位，`opacity` 属性设置为 `1`，是为了让图片一开始就显示出来。

3. JavaScript 部分：

$(function() {
  var images = [
    "a1.gif",
    "a2.gif",
    "a3.gif",
    "a4.gif",
    "a5.gif",
    "a6.gif",
    "a7.gif",
    "a8.gif",
    "a9.gif"
  ];
  var currentIndex = 0;
  var image = $("#image");
  var changeBtn = $("#change-btn");
  var resetBtn = $("#reset-btn");
  var isAnimating = false;

  function fadeOutIn() {
    if (isAnimating) return;
    isAnimating = true;
    image.fadeOut(function() {
      image.attr("src", images[currentIndex]);
      currentIndex = (currentIndex + 1) % images.length;
      image.fadeIn(function() {
        isAnimating = false;
      });
    });
  }

  changeBtn.on("click", function() {
    fadeOutIn();
  });

  resetBtn.on("click", function() {
    location.reload();
  });
});

其中 `images` 数组存储了所有图片的路径，`currentIndex` 表示当前显示的图片在数组中的下标，`image` 是图片元素，`changeBtn` 和 `resetBtn` 分别是切换图片和重置按钮元素，`isAnimating` 表示当前是否正在执行动画。

`fadeOutIn` 函数实现了淡出、更换图片、淡入的效果。在淡出动画完成后，回调函数中更换图片路径，并将 `currentIndex` 加 1，达到循环显示效果。在淡入动画完成后，将 `isAnimating` 设为 `false`，表示动画执行完毕。

最后，将 `fadeOutIn` 函数绑定到 `changeBtn` 的点击事件上，将页面重新加载的操作绑定到 `resetBtn` 的点击事件上。

这样就实现了用 jQuery 实现单击第一个按钮，令图片先淡出，然后换成另外一张图片再淡入……实现a1.gif~a9.gif这九张图片依次交替显示的效果，以及单击第二个按钮，页面重新加载的功能。