为什么jQuery精灵动画会在第二个mouseenter上播放额外的帧?
|
我正在使用CSS精灵和jQuery插件。
我有一个超级马里奥图像,当滑过时,我想播放动画。当您将鼠标从“超级马里奥”(这是一个
<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变慢,因此我可以尝试弄清楚这里发生了什么。由于某些原因,第一个悬停和鼠标移出效果很好。但是,在第二次悬停期间,发生了一些奇怪的事情。它似乎播放了额外的帧。我不明白为什么。
这是我的2幅图片(我没有当前的网络服务器来显示实时演示):
你们对为什么会发生有任何想法吗?
谢谢。
没有找到相关结果
已邀请:
2 个回复
吐兄
编辑:我刚刚意识到,以前发布的解决方案大致相同!不知道为什么这对您不起作用。它为我工作。
拭十年
这将消除“多余的帧”。但是,您还有一个更深的问题,那就是,快速地上下悬停会导致帧不同步。如果您能以某种方式“重置”到鼠标悬停的第一帧,然后从那里进行动画处理,那就太好了。