0

私はjqueryで要素をフェードインしています:

$("#bookcase_container").fadeOut( function(){
  $("#bookcase_container").html("<canvas id='shelf_canvas'></canvas>").fadeIn();
});
loadCanvasEditor();

次に、キャンバス エディタでキャンバス要素の高さを次のように設定しようとします。

function loadCanvasEditor(){
  document.getElementById("shelf_canvas").height = "900px";
}

しかし、shelf_canvas が null であるというエラーが表示されます。純粋なjqueryも使用してみましたが、結果が得られません(エラーメッセージや解像度の変更はありません):

$("#shelf_canvas").height(900);

$(document) だけでなく、shelf_canvas にも .ready() と onload を使用してみましたが、まだ結果はありません。このコードは、fadeOut/fadeIn を使用しない場合は正常に機能します。何がうまくいかないのですか？

4

1 に答える 1

1

使用fadeOutしているアニメーションは非同期操作です。したがって、アニメーションが終了した後に DOM に挿入する HTML は、loadCanvasEditor関数を呼び出そうとしているときにアクセスできません。この呼び出しをコールバックに組み込むと、期待どおりに動作するはずです。

$("#bookcase_container").fadeOut( function(){

  $("#bookcase_container").html("<canvas id='shelf_canvas'></canvas>").fadeIn();
  loadCanvasEditor();

});

ボーナスの可能性: promisejQuery アニメーションが公開するインターフェイスを使用します (多数の要素を含むより複雑なケースで役立ちます):

$("#bookcase_container").fadeOut( function(){

  $("#bookcase_container").html("<canvas id='shelf_canvas'></canvas>").fadeIn();

}).promise().done(function(){

   loadCanvasEditor();

});

そのアプローチのデモ フィドルを参照してください。

両方のケースのドキュメントは、次のページで入手できます。.fadeIn()

于 2012-11-01T08:36:27.007 に答える