鼠标离开时悬停和反向的跨浏览器动画 gif
Cross-Browser animated gif on hover & reverse when mouse leaves
我有以下图片:
静态图像 |启动动画 |片尾动画
我正在使用以下代码(jsfiddle 示例):
$(function() {
$("#link-gif").hover(
function() {
/* starting animation */
$(this).css("background-image", "url('https://i.stack.imgur.com/14qMg.gif')");
},
function() {
/* ending animation */
$(this).css("background-image", "url('https://i.stack.imgur.com/npwJ0.gif')");
}
);
});
#link-gif {
width:150px;
height:40px;
border:1px solid #39464E;
background-image:url('https://i.stack.imgur.com/W4Kgi.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>
相关文章:
- 萤火虫动画,一段时间后浏览器会变慢
- 当浏览器下载所需的文件时,GIF 在初始屏幕中缓慢制作动画
- 奇怪的jquery在不同的浏览器中动画行为
- 鼠标离开时悬停和反向的跨浏览器动画 gif
- 如何显示 .toggle 或 .使用 Meteor 对所有连接的浏览器会话进行动画处理
- jQuery动画在FF中运行良好,但在所有其他浏览器中效果不佳
- JavaScript 动画在 iOS Safari Webkit 浏览器中停止,当手指在屏幕上而不抬起时
- 使网络工具包动画在非网络工具包浏览器上工作
- 如何使用jQuery在移动网络浏览器上设置滚动动画
- 适用于浏览器的红心坠落动画
- Mozilla Firefox或除Chrome以外的其他浏览器的缩放动画
- 跨浏览器背景Y位置动画
- 使用snap.svg IE和EDGE网络浏览器快速悬停,放大/缩小动画
- 调整EaselJS动画的大小,同时'It’It’s播放时不会放慢浏览器的速度
- 跨浏览器JavaScript(不是jQuery...)滚动到顶部动画
- 浏览器滚动条动画性能
- Javascript动画:IE vs其他浏览器
- 在所有主流浏览器中,GIF动画和javascript在同一个线程上运行,这是真的吗?
- CSS3动画在除Chrome以外的所有浏览器中工作
- 谷歌气泡图:如何使用浏览器+动画