您可以在此处删除原始图像:
newImg.animate(css, SPEED, function() {
img.remove();
newImg.removeClass('morpher');
(callback || function() {})();
});
剩下的就是newImg
。然后您使用重置链接引用图像#rocket
:
$("#rocket").attr('src', ...
但你的newImg
没有id
属性更不用说id
of rocket
.
要解决此问题,您需要删除img
然后设置id
的属性newImg
to 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/ambigously/W2K9D/ http://jsfiddle.net/ambiguous/W2K9D/
UPDATE:更好的方法(如 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/ambiguously/W2K9D/1/ http://jsfiddle.net/ambiguous/W2K9D/1/
的泄漏$('.throbber, .morpher')
插件之外并不是最好的事情,但只要有记录就没什么大不了的。