Question

我正在使用jquery淡化元素：

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

然后在画布编辑器中，我尝试设置canvas元素的高度，如下所示：

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

但是我收到一条错误，指出shelf_canvas为null。我也试过使用纯jquery，但后来没有结果（没有错误信息或改变分辨率）：

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

我也尝试使用.ready（）和onload for shelf_canvas以及$（document），但仍然没有结果。如果我不使用fadeOut / fadeIn，此代码可以正常工作。可能出现什么问题？

Answer 1

您正在使用的fadeOut动画是异步操作。因此，当您尝试调用loadCanvasEditor函数时，无法访问动画完成后插入DOM的HTML。如果将此调用合并到回调中，事情应按预期工作：

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

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

});

BONUS可能性：使用jQuery动画公开的promise - 界面（在包含大量元素的更复杂的情况下有用）：

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

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

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

   loadCanvasEditor();

});

请参阅 a demo fiddle 了解该方法。

.fadeIn()

页面上提供了

Docs on both cases

元素在FadeIn / FadeOut后返回null

1 个答案: