jQuery圖像交換 - 在鉻中的奇怪行爲

我有一個小JS功能運行，以更改mouseover上的GIF。它基本上是這樣工作的：在底層有一個gif循環，在mouseenter上打開到另一個循環。上面還有另一個gif，它顯示了這兩個狀態之間的轉換，這也是在mouseenter上的轉換。這第二個GIF不循環和結束的透明框架上，露出下面的GIF - 聽起來有點複雜，所以只是看看我的jsfiddle：jQuery圖像交換 - 在鉻中的奇怪行爲

http://jsfiddle.net/Njw95/

現在它在Safari和Firefox可以正常使用，但是在升級動畫應該播放之前Chrome有一個小問題：，隨機幀閃爍有一毫秒。我可以將此幀識別爲「降級」動畫的第一幀。我將降級動畫的第一幀更改爲黑色。現在在Chrome中，有上了mouseenter和鼠標離開黑色閃光......僅在鼠標離開其他瀏覽器...

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

來源

2014-07-12 user3337977

這是不相關的，但是'img'是自閉的：''，而不是''。 – AstroCB

另外，由於您使用的是jQuery，因此您可以使用['.hover（）']（http://api.jquery.com/hover），它接受'mouseenter'和'mouseleave'的兩個函數參數，簡化您的代碼。 – AstroCB

我剛剛在Firefox和Chrome上試過這個，我從未注意到任何區別？ –

看起來像在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%; 
}

來源

2014-07-12 17:56:51

真棒！非常感謝你這個伎倆！ – user3337977

jQuery圖像交換 - 在鉻中的奇怪行爲

回答

相關問題