HoverCrossfade是一个jQuery悬停效果插件，当鼠标悬停在按钮或链接元素上时，它可以在两个图像之间平滑地交叉显示。

这是通过改变按钮或链接元素的背景图像（通常是图像精灵）的位置来完成的，然后使用jQuery调整该背景图像的不透明度动画（）方法

如何使用它:

1.向按钮或链接元素添加背景图像。

<a href="#" id="button">Hover Me</a>
<!-- OR -->
<button id="button">Hover Me</button>

#button1 {
  /* button styles here */
  position:relative;
  background-image:url(bg.png);
  background-repeat:no-repeat;
  background-position:0 0;
}

/* change the bg position when JS is disabled (OPTIONAL) */
#button:hover {
  background-position:0 -70px;
}

2.插入jquery.hovercrossfade.js查询jQuery之后的脚本。

<script src="/path/to/cdn/jquery.min.js"></script>
<script src="/path/to/jquery.hovercrossfade.js"></script>

3.在目标元素上调用插件，并设置背景图像的位置。

$("#button").hoverCrossfade({

  // initial position
  normalBackgroundPositions: ["0 0", "0 0"],

  // on-hover position
  hoverBackgroundPositions: ["0 -70px", "0 -45px"],

});

4.确定横向渐变将持续多长时间。

$("#button").hoverCrossfade({

  // initial position
  normalBackgroundPositions: ["0 0", "0 0"],

  // on-hover position
  hoverBackgroundPositions: ["0 -70px", "0 -45px"],

  fadeInTime: 300,
  fadeOutTime: 600,

});

预览截图

悬停时BG图像之间 交叉渐变 jQuery悬停交叉渐变