Question

我有一个小的JS函数正在运行以在鼠标悬停时更改gif。它基本上是这样的：在底层，有一个gif循环，它在mouseenter上切换到另一个。在那个上面还有另一个gif，它显示了这两个状态之间的转换，这也是mouseenter上的切换。第二个gif没有循环并在透明框架上结束，以显示下面的gif - 听起来有点复杂，所以只要看看我的jsfiddle：

http://jsfiddle.net/Njw95/

现在它在safari和firefox中完美运行，但是chrome有一个小问题：就在升级动画应该播放之前，有一毫秒的随机帧闪烁。我可以将此框架识别为＆＃34;降级＆＃34;的第一帧。动画。我将降级动画的第一帧更改为黑色。现在使用chrome，鼠标中心和鼠标左键都有黑色闪光......在其他浏览器中只有鼠标左右...

$(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');
});
});

Answer 1

看起来像Chrome中的一些gif图像缓存错误您可以改为始终请求新图片。解决了我的问题：

<强> jsFiddle demo

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%;
}

jQuery图像交换 - chrome中的奇怪行为

1 个答案: