JQuery attr() изменить img src

Я запускаю эффект запуска Rocket jQuery. Когда я нажимаю на Rocket, он будет заменяться другим ракетом, а затем запускается. Когда я нажимаю ссылку "Reset", Rocket должен reset начальное местоположение, и изображение должно вернуться назад. Но есть две проблемы. Во-первых, "мое изображение ракеты не возвращается". Второй - после того, как он вернется в исходное местоположение, если я снова нажму на 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().

Ответ 1

Вы удаляете исходное изображение здесь:

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

И все, что осталось, newImg. Затем ссылка reset ссылается на изображение с помощью #rocket:

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

Но ваш newImg не имеет атрибута id, не говоря уже о id of 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/

UPDATE. Лучшим подходом (как отметил mellamokb) было бы скрыть исходное изображение, а затем показать его снова, когда вы нажмете кнопку reset. Сначала измените действие 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') вне плагина - это не лучшая вещь, но это не большая проблема, если она документирована.

Ответ 2

Функция imageMorph создаст новый элемент img, поэтому идентификатор будет удален. Изменено на

$( "# wrapper > img" )
Вы должны использовать функцию live() для события click, если вы хотите, чтобы вы снова запустили ракетный лагерь.

Обновлено демо: http://jsfiddle.net/ynhat/QQRsW/4/