我有一个小的 JS 函数运行以在鼠标悬停时更改 gif。它基本上是这样工作的: 在底层有一个 gif 循环,它在 mouseenter 上切换到另一个。 在那个上面还有另一个 gif,它显示了这两个状态之间的转换,也是 mouseenter 上的 switchend。第二个 gif 没有循环并以透明框架结束,以显示下面的 gif - 听起来有点复杂,所以看看我的 jsfiddle:
现在它在 safari 和 firefox 中运行完美,但在 chrome 中有一个小问题: 就在升级动画应该播放之前,有一毫秒的随机帧闪烁。我可以将此帧识别为“降级”动画的第一帧。我将降级动画的第一帧更改为黑色。现在在 chrome 中,在 mouseenter 和 mouseleave 上有一个黑色的闪光......在其他浏览器中只有在 mouseleave 上......
$(document).ready(function () {
$(".col1").mouseenter(function () {
$("#levelup").attr('src', 'http://studio-bonsei.de/bilder/upgrade.gif');
$("#mainpic").attr('src', 'http://studio-bonsei.de/bilder/level2.gif');
});
$(".col1").mouseleave(function () {
$("#levelup").attr('src', 'http://studio-bonsei.de/bilder/downgrade_tr.gif');
$("#mainpic").attr('src', 'http://studio-bonsei.de/bilder/standard.gif');
});
});
最佳答案
看起来像 Chrome 中的一些 gif 图像缓存错误。
您可以改为始终请求新图片。为我解决了这个问题:
JS:
var $pic = $("#pic"),
path = "http://studio-bonsei.de/bilder/";
$pic.hover(function( e ) {
var mE = e.type=="mouseenter";
var s = new Image(); s.src = path+(mE?"upgrade":"downgrade_tr")+".gif";
var b = new Image(); b.src = path+(mE?"level2":"standard") +".gif";
$pic[0].src = s.src;
$pic[0].style.backgroundImage = "url("+ b.src +")";
});
HTML(是的,所有你需要的)
<img id="pic" src="http://studio-bonsei.de/bilder/standard.gif">
CSS:
*{margin:0;}
#pic {
background: url(http://studio-bonsei.de/bilder/empty.gif) no-repeat 50% 50% / cover ;
width: 50%;
}
关于javascript - jQuery 图像交换 - chrome 中的奇怪行为,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/24714227/