为什么jQuery spritely动画在第二个mouseenter上播放额外的帧？
Qco*_*com 2 javascript jquery css-sprites
我正在使用CSS sprites和jQuery插件spritely.
我有一个超级马里奥图像,当翻过来时,我想要动画播放.当你将鼠标从超级马里奥(这是一个<div>元素)移开时,我希望动画可以反向播放到它开始的原始位置.
这是我到目前为止:
<!DOCTYPE html>
<html>
<head>
<title>Mario Planet Spritely Nav</title>
<script src="http://cdnjs.cloudflare.com/ajax/libs/jquery/1.6.1/jquery.min.js"></script>
<script src="jquery.spritely-0.5.js"></script>
<script>
$(document).ready(function() {
$('#mario').hover(
function() {
$('#mario').sprite({
fps: 2,
no_of_frames: 6,
play_frames: 6
});
},
function() {
$('#mario').sprite({
fps: 2,
no_of_frames: 6,
play_frames: 5,
rewind: true
});
}
);
});
</script>
<style>
#mario {
position: absolute;
width: 40px;
height: 52px;
background: transparent url(mh.png);
cursor: pointer;
}
</style>
</head>
<body>
<div id="mario"></div>
</body>
</html>
我的fps故意慢,所以我可以试着弄清楚这里发生了什么.出于某种原因,第一个悬停和鼠标移动工作很棒.但是,在第二次悬停期间,发生了一些奇怪的事情.它似乎发挥了额外的框架.我不明白为什么.
这是我的mh.png图片(我没有当前的网络服务器来显示现场演示):
你们有没有想过为什么会这样？
谢谢.
我碰巧是Spritely开发人员之一 - 也许我可以提供一些帮助!
发生这种情况是因为运行Sprite时play_frames值不同.不可否认,这很令人困惑.我会试着解释一下.
当你最初调用精灵时,它将播放前6帧.再次鼠标移出时,它将返回5帧.到目前为止一切都很好.但事情变得不同步,所以当你玩下一个6时,你比预期更进一步.
以下解决方案应该为您解决,
var play_frames = 6;
$('#mario').hover(
function() {
$('#mario').sprite({
fps: 2,
no_of_frames: 6,
play_frames: play_frames
});
play_frames = 5;
},
function() {
$('#mario').sprite({
fps: 2,
no_of_frames: 6,
play_frames: 5,
rewind: true
});
}
);
编辑:我刚刚意识到之前发布的解决方案或多或少相同!不知道为什么这对你不起作用.它对我有用.