13

jQueryでロケット発射エフェクトを作っています。ロケットをクリックすると、別のロケットの画像に切り替わり、打ち上げられます。「リセット」リンクをクリックすると、ロケットは開始位置をリセットし、画像を元に戻す必要があります。しかし、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() 行が表示されます。

4

2 に答える 2

9

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

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

そして、残るのはnewImg. 次に、次を使用してリンク参照をリセットします#rocket。

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

しかし、 your にはof は言うまでもなく属性newImgがありません。ididrocket

これを修正するには、 の属性を削除imgしてから に設定する必要があります。idnewImgrocket

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')これまでで最高のものではありませんが、文書化されている限り大したことではありません.

于 2011-05-13T03:33:17.423 に答える
3

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

    $("#wrapper > img")

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

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

于 2011-05-13T03:41:32.827 に答える