我有以下图片:
Static Image | Starting Animation | Ending Animation
我正在使用以下代码 ( jsfiddle example ):
$(function() {
$("#link-gif").hover(
function() {
/* starting animation */
$(this).css("background-image", "url('http://i.imgur.com/HhsBws5.gif')");
},
function() {
/* ending animation */
$(this).css("background-image", "url('http://i.imgur.com/WLFzz3S.gif')");
}
);
});
#link-gif {
width:150px;
height:40px;
border:1px solid #39464E;
background-image:url('http://i.imgur.com/YgLJoVH.png'); /*static*/
background-size:contain;
background-repeat:no-repeat;
background-position:bottom center;
cursor:pointer;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div id="link">
<div id="link-gif"> </div>
</div>
总而言之,我想要发生的是:我首先加载静态图像。当有人将鼠标悬停在 #link-gif
上时,开始动画 gif 开始,当您将鼠标悬停在其上时,结束动画开始。
出于某种原因,当您将鼠标悬停在图像上时,图像没有动画。它只是走到 gif 的末尾。有谁知道为什么会这样?
最佳答案
发生这种情况是因为图像被缓存了。尝试在 gif 的末尾添加一些动态值,例如时间。检查我对您的代码所做的修改。我在 img 路径中添加了当前时间。
$(function() {
$("#link-gif").hover(
function() {
/* starting animation */
var url = "url('http://i.imgur.com/HhsBws5.gif?time=" + new Date().getTime() + "')";
$(this).css("background-image", url);
},
function() {
/* ending animation */
var url = "url('http://i.imgur.com/WLFzz3S.gif?time=" + new Date().getTime() + "')";
console.log(url);
$(this).css("background-image", url );
}
);
});
#link-gif {
width:150px;
height:40px;
border:1px solid #39464E;
background-image:url('http://i.imgur.com/YgLJoVH.png'); /*static*/
background-size:contain;
background-repeat:no-repeat;
background-position:bottom center;
cursor:pointer;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div id="link">
<div id="link-gif"> </div>
</div>
关于javascript - 鼠标离开时悬停和反转时跨浏览器动画 gif,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/35733029/