jQuery attr（）改变了img src

我正在通过jQuery制作一些Rocket启动效果。 当我点击Rocket时，它将与另一个火箭图像交换，然后启动。 当我点击“重置”链接时，Rocket必须重置起始位置，图像必须恢复。 但是有两个问题。 首先，“我的火箭图像不会恢复”。 第二 – 在它恢复到初始位置后，如果我再次点击Rocket，它就不会启动。 你能看到并找到我的解决方案吗？

http://jsfiddle.net/thisizmonster/QQRsW/

$("#resetlink").click(function(){ clearInterval(timerRocket); $("#wrapper").css('top', '250px'); $("#rocket").attr('src', 'http://sofzh.miximages.com/jquery/P-SAM-rocket-blk.jpg'); }); 

你可以看到$（“rocket”）。attr（）行。

Answer 1

您在此处删除原始图片：

 newImg.animate(css, SPEED, function() { img.remove(); newImg.removeClass('morpher'); (callback || function() {})(); }); 

剩下的就是newImg 。 然后使用#rocket重置链接引用图像：

 $("#rocket").attr('src', ... 

但是你的newImg没有id属性，更不用说rocket 。

要解决此问题，您需要删除img ，然后将newImg的id属性设置为rocket ：

 newImg.animate(css, SPEED, function() { var old_id = img.attr('id'); img.remove(); newImg.attr('id', old_id); newImg.removeClass('morpher'); (callback || function() {})(); }); 

然后你会再次获得shiny的黑色火箭： 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, SPEED, function() { img.css(orig).hide(); (callback || function() {})(); }); 

新的和改进的： http ： //jsfiddle.net/ambiguous/W2K9D/1/

在插件之外泄漏$('.throbber, .morpher')并不是最好的事情，但只要记录在案，它就不是什么大问题。

Answer 2

1. 函数imageMorph将创建一个新的img元素，因此删除了id。 变成

   $（“＃wrapper> img”）

2. 如果你想再次使用火箭，你应该使用live（）函数进行点击事件。

更新的演示： http ： //jsfiddle.net/ynhat/QQRsW/4/