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的{{1}}属性设置为newImg：

rocket

然后你会再次回到闪亮的黑色火箭：http://jsfiddle.net/ambiguous/W2K9D/

更新：更好的方法（如mellamokb所述）将隐藏原始图像，然后在您点击重置按钮时再次显示。首先，将重置操作更改为以下内容：

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

在$("#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()
};

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

插件外部newImg.animate(css, SPEED, function() { img.css(orig).hide(); (callback || function() {})(); });的泄漏并不是最好的事情，但只要记录在案，就没什么大不了的。

Answer 2

函数imageMorph将创建一个新的img元素，因此删除了id。改为

$（“＃wrapper＆gt; img”）
如果你想要再次发射火箭，你应该使用live（）函数进行点击事件。

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

jQuery attr（）改变了img src

2 个答案: