为什么jQuery spritely动画在第二个mouseenter上播放额外的帧？ [英] Why does jQuery spritely animation plays an extra frame on second mouseenter?
问题描述
我正在使用CSS sprites和jQuery插件 spritely 。
I am working with CSS sprites and the jQuery plugin spritely.
我有一个超级马里奥图像，当翻过来时，我想要播放动画。什么时候，你将鼠标从超级马里奥（这是一个< div> 元素）移开，我希望动画能够反向回到原来的位置开始。
I have a Super Mario image and when rolled over, I'd like the animation to play. When, you move your mouse away from the Super Mario (which is a <div> element), I would like the animation to play in reverse back to the original place it started.
这是我到目前为止所拥有的：
Here is what I have so far:
<!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故意慢，所以我可以尝试弄清楚这里发生了什么。出于某种原因，第一个悬停和鼠标移动工作很棒。但是，在第二次悬停期间，发生了一些奇怪的事情。它似乎发挥了额外的框架。我不明白为什么。
I have the fps intentionally slow so I can try and figure out what's going on here. For some reason, the first hover and mouseout work great. But then, during the second hover, something weird happens. It appears to play an extra frame. I don't understand why.
这是我的 mh.png 图片（我当前没有网络服务器显示现场演示）：
Here is my mh.png image (I don't have a current webserver to show a live demo):
你们有没有想过为什么会这样？
Do you guys have any idea as to why this is occurring?
谢谢。
推荐答案
我恰好是Spritely开发人员之一 - 也许我可以提供一些帮助！
I happen to be one of the Spritely developers -- perhaps I can be of some help!
由于运行Sprite时play_frames值不同，因此发生了这种情况。不可否认，这很令人困惑。我会尝试解释。
This is happening because of the different play_frames values when running the Sprite. Admittedly it is quite confusing. I'll try and explain.
当你最初调用精灵时，它将播放前6帧。再次鼠标移出时，它将返回5帧。到目前为止一切都很好。但是事情变得不同步了，所以当你玩下一个6时，你比预期更进一步。
When you initially call sprite, it will play the first 6 frames. When you mouse out again, it will go back by 5 frames. All is good so far. But things get out of sync, and so when you play the next 6, you are one frame further than expected.
以下解决方案应该为你修复，
The following solution should fix it for you,
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
});
}
);
编辑我刚刚意识到之前发布的解决方案更多或是不太一样！不知道为什么这对你不起作用。这对我有用。
I have just realized that the solution posted previously is more or less the same! Not sure why this would not work for you. It is working for me.
这篇关于为什么jQuery spritely动画在第二个mouseenter上播放额外的帧？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
