jQuery attr () изменить img src - PullRequest
Новая
       38

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

13 голосов
/ 13 мая 2011

Я создаю эффект запуска ракеты с помощью 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 ().

Ответы [ 2 ]

9 голосов
/ 13 мая 2011

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

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

3 голосов
/ 13 мая 2011

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

    $ ("# wrapper> img")

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

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

...