我正在通过jQuery做一些火箭发射效果.当我点击火箭时,它会与另一个火箭图像交换,然后启动.当我点击“重置”链接,火箭必须重置起始位置,图像必须恢复.但有两个问题.首先,“我的火箭图像没有回复”.第二 – 它恢复到初始位置后,如果我再次点击火箭,它不会启动.你可以看到并找到我的解决方案吗？
http://jsfiddle.net/thisizmonster/QQRsW/
$("#resetlink").click(function(){
clearInterval(timerRocket);
$("#wrapper").css('top','250px');
$("#rocket").attr('src','http://www.kidostore.com/images/uploads/P-SAM-rocket-blk.jpg');
});
你可以看到$(“rocket”).attr()行.
解决方法
您在此处删除原始图像：
newImg.animate(css,SPEED,function() {
img.remove();
newImg.removeClass('morpher');
(callback || function() {})();
});
所有留下的都是newImg.然后您使用#rocket重置链接引用图像：
$("#rocket").attr('src',...
但是你的newImg没有id属性,更不用说火箭的id了.
要解决这个问题,你需要删除img,然后将newImg的id属性设置为rocket：
newImg.animate(css,function() {
var old_id = img.attr('id');
img.remove();
newImg.attr('id',old_id);
newImg.removeClass('morpher');
(callback || function() {})();
});
然后你会再次闪亮的黑色火箭：http://jsfiddle.net/ambiguous/W2K9D/
更新：更好的方法(如mellamokb所指出的)将是隐藏原始图像,然后再次显示,当您按下重置按钮.首先,将重置操作更改为如下所示：
$("#resetlink").click(function(){
clearInterval(timerRocket);
$("#wrapper").css('top','250px');
$('.throbber,.morpher').remove(); // Clear out the new stuff.
$("#rocket").show(); // Bring the original back.
});
并在newImg.load函数中,抓取图像原始大小：
var orig = {
width: img.width(),height: img.height()
};
最后,完成变形动画的回调成为：
newImg.animate(css,function() {
img.css(orig).hide();
(callback || function() {})();
});
新改进：http://jsfiddle.net/ambiguous/W2K9D/1/
插件之外的$(‘.throbber,.morpher’)泄漏不是最好的事情,只要它被记录在案,这不是一件大事.
