如何保持ImageSwap流畅的jquery

我发现这个脚本可以在hover时更改图像。

$(document).ready(function() { $('.rollover').hover(function() { swapImage(this); }, function() { swapImage(this); }); }); function swapImage(image) { var current = $(image).attr('src'); $(image).attr('src', $(image).attr('hover')); $(image).attr('hover', current); } 

但现在我遇到了问题，我想要一个平滑/柔和的运输，而不是那个，它现在做了什么。 在这里你可以找到一个小提琴： JSfiddle

谢谢，周日愉快！

Answer 1

它对我来说非常顺利。 您的交换方法可能很大程度上取决于用户计算机的浏览器，操作系统和硬件规格，因为您在通过JS更改图像src做了大量工作。

虽然浏览器通常足够智能，可以保持先前加载的图像缓存并且易于访问，但是在第一次转换时，您的方法并不总是顺畅，因为浏览器在您更改src之前不知道新图像，此时浏览器开始下载图像。 不幸的是，您还试图在此时显示图像，因此在显示图像但未实际加载时会有一些断开连接。

一种更简单的方法是将两个图像都加载到页面上（因此有两个标签），并隐藏一个。 然后在翻转时，交换哪一个被隐藏，哪个被显示，并在不hover时交换回来。 这种交换效果可以纯粹在CSS中实现，这将比JS更快。 它还将在用户交互之前预加载隐藏图像，因为第二个图像已经在页面上，因此您可以立即开始更平滑地过渡到隐藏图像。

我用下面的代码修改了你的小提琴 。 我向添加了一个类，并添加了第二个而不是使用hover attr。 一些HTML注释： hover是 （或任何其他元素）的无效属性。 你应该使用data-hover ，如果有的话，它遵循标准的HTML5 data-*自定义属性规范，但我们不需要它用于这个CSS解决方案。 此外，你在小提琴中缺少一个结束标签。

HTML：

CSS：

 .rollover-swap { display: none; /*Hide the rollover image*/ } .rollover-container:hover .rollover { display: none; /*If we hover over the , then hide the normal image*/ } .rollover-container:hover .rollover-swap { display: inline; /*If we hover over the , then show the rollover image*/ } 

JS：

没有！