我正在学习 jQuery,但我仍然遇到无法找到解决方案的问题。这一次,我使用 sprite 为页面设置动画。我可以完成一项工作,但我有两个问题: 1)效果不会像它应该的那样在 mouseout 上停止(我希望动画重置并返回灰色);和 2)我不能让它为多个按钮工作。就好像第一个代码仍在运行,不允许第二个(我需要 4 个)启动。
带有两个按钮的 JS Fiddle(已编辑 - 路线固定):http://jsfiddle.net/U9zvL/10/
所以我的脚本有错误/缺少某些东西,我不确定这是否是第二个脚本不起作用的原因。
脚本:
<script type='text/javascript'>
$(document).ready(function(){
$("#Q1animation").mouseenter(function() {
$('#Q1animation').sprite({fps: 18, no_of_frames: 5, play_frames: 5});
});
$('#Q1animation').destroy();
$("#Q1animation").mouseleave(function() {
$('#Q1animation').spStop(true);
});
});
</script>
<script type='text/javascript'>
$(document).ready(function(){
$("#Q2animation").mouseenter(function() {
$('#Q2animation').sprite({fps: 18, no_of_frames: 5, play_frames: 5});
});
$('#Q2animation').destroy();
$("#Q2animation").mouseleave(function() {
$('#Q2animation').spStop(true);
});
});
</script>
感谢您能给我的任何帮助!
最佳答案
在 Chrome 控制台中:
Uncaught TypeError: Cannot convert null to object jquery.spritely-0.5.js:478
这是一行代码:
destroy: function() {
var el = $(this);
var el_id = $(this).attr('id');
delete $._spritely.instances[el_id] // <--- HERE
return this;
}
所以看起来问题在于您在对对象调用 spritely 初始化之前尝试 spritely-destroy
,而库无法很好地处理该对象。尝试删除 .destroy()
调用(也执行其他代码清理):
$(function() {
$("#Q1animation, #Q2animation").mouseenter(function() {
$(this).sprite({
fps: 18,
no_of_frames: 5,
play_frames: 5
});
}).mouseleave(function() {
$(this).spStop(true);
});
});
演示:http://jsfiddle.net/mattball/9KWp5/
编辑 - 开始工作
$(function() {
$("#Q1animation, #Q2animation").mouseenter(function() {
$(this).sprite({
fps: 18,
no_of_frames: 5,
play_frames: 5
});
}).mouseleave(function() {
$(this).spStop(true).destroy();
});
});
关于使用 Sprite 的 jQuery - 放置多个效果,可能是语法问题,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/7146916/