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

Я делаю некоторый эффект запуска ракеты jQuery. Когда я нажимаю на 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');
});

вы можете увидеть $("ракета").строка attr ().

13
attr image jquery src

2 ответов

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

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

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

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

но ваш newImg нет id атрибут не говоря уже о id of rocket.

чтобы исправить это, вам нужно удалить img и выберите на 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/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') за пределами плагина не самая лучшая вещь, но это не имеет большого значения, пока она документирована.

9

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

    $("#wrapper > img")

  2. вы должны использовать функцию live () для события щелчка, если вы хотите, чтобы вы снова запустили ракету.

обновленная демонстрация:http://jsfiddle.net/ynhat/QQRsW/4/

3