jQuery attr()更改img src

我正在用jQuery制作火箭发射效果。当我单击“火箭”时，它将与另一个火箭图像交换，然后启动。当我单击“重置”链接时，火箭必须重置起始位置，并且图像必须还原。但是有两个问题。首先，“我的火箭图像没有恢复原状”。其次-恢复到初始位置后，如果我再次单击Rocket，它将无法启动。您可以找到我的解决方案吗？

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的rocket了。

要解决此问题，您需要删除img，然后将id的newImg属性设置为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所述)是隐藏原始图像，然后在按下“重置”按钮时再次显示它。首先，将reset操作更改为以下内容:

$("#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')泄漏不是最好的事情，但是只要有记录，这并不是什么大不了的事情。