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 为空。我也尝试过使用纯 jquery,但没有得到任何结果(没有错误消息或更改的分辨率):

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

我也尝试使用 .ready() 和 onload 用于shelf_canvas 以及$(document),但仍然没有结果。如果我不使用淡出/淡入,这段代码可以正常工作。可能出了什么问题?

4

1 回答 1

1

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

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

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

});

额外的可能性:使用promisejQuery-animations 公开的界面(在具有大量元素的更复杂的情况下有用):

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

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

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

   loadCanvasEditor();

});

请参阅该方法的演示小提琴

页面上提供了有关这两种情况的文档.fadeIn()

于 2012-11-01T08:36:27.007 回答