web-dev-qa-db-ja.com

jQuery attr（）change img src

JQueryでRocketの起動効果を作成しています。 Rocketをクリックすると、別のロケットの画像と交換されてから起動します。 [リセット]リンクをクリックすると、ロケットは開始位置をリセットし、画像を元に戻す必要があります。しかし、2つの問題があります。まず、「ロケットの画像が元に戻らない」。 2番目-最初の場所に戻った後、もう一度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（）行が表示されます。

jqueryimagesrcattr
13
Gereltod

ここで元の画像を削除します。

_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/

[〜＃〜] 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/ambiguous/W2K9D/1/

プラグインの外部での$('.throbber, .morpher')のリークは、これまでで最高のものではありませんが、文書化されている限り、大したことではありません。

9
mu is too short

  1. 関数imageMorphは新しいimg要素を作成するため、IDは削除されます。に変更

    $（ "＃wrapper> img"）

  2. 再びロケットランチをしたい場合は、クリックイベントにlive（）関数を使用する必要があります。

更新されたデモ： http://jsfiddle.net/ynhat/QQRsW/4/

3
YNhat