jQuery attr()改变了img src

Question

我正在通过jQuery制作一些Rocket启动效果.当我点击Rocket时,它将与另一个火箭图像交换,然后启动.当我单击"重置"链接时,Rocket必须重置起始位置,图像必须恢复.但是有两个问题.首先,"我的火箭图像不会恢复".第二 - 在它恢复到初始位置后,如果我再次点击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()行.

Answer 1

您在此处删除原始图片:

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() {})();
});

然后你会再次回到闪亮的黑色火箭: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')插件外部的泄漏并不是最好的事情,但只要记录在案,它就不是什么大问题.