jQuery切换后如何调整对象的大小？

Question

提前谢谢。我是 jQuery 新手，这是我在 Stack 上的第一个问题：

我有一个切换功能，它使两个 div，#B 和 #C，向左和向右移动：

$("#toggleNav").toggle(
  function() {
    $("#B").stop(true).animate({
      left: 0
    }, 130)
    $("#C").stop(true).animate({
      left: 0
    }, 130)
  }, function() {
    $("#B").stop(true).animate({
      left: 80
    }, 130)
    $("#C").stop(true).animate({
      left: 300
    }, 130)
});

div #C 的宽度是窗口的剩余宽度。因此，随着窗口大小的调整，div #C 变得越来越小。

在 div #C 中，我有一个 Wijmo line chart 小部件，只要调整窗口大小，它就会重新绘制以适应 div #C：

$(window).resize(function(){
    $("#wijlinechart").wijlinechart("redraw");
});

我希望图表在切换完成后重新绘制为 div #C 的结果大小。我试过这个，除此之外：

$("#toggleNav").toggle(
  function() {
    $("#B").stop(true).animate({
      left: 0
    }, 130)
    $("#C").stop(true).animate({
      left: 0
    }, 130)
    $("#wijlinechart").wijlinechart("redraw");
  }, function() {
    $("#B").stop(true).animate({
      left: 80
    }, 130)
    $("#C").stop(true).animate({
      left: 300
    }, 130)
    $("#wijlinechart").wijlinechart("redraw");
});

此时，当 div #C 调整大小时，折线图被重绘，但它被重绘为调整大小之前 div #C 的大小。因此，随着 div #C 变小，图表会变大，而随着 div #C 变大，图表会变小。

如何将重绘延迟到切换完成后？还是在切换完成后调用重绘函数？

Answer 1

查看.animate 的回调（完成）参数。

$("#C").stop(true).animate({
    left: 0
}, 130, function(){//pass a function callback to be executed when animation ends
    $("#wijlinechart").wijlinechart("redraw");
});

将两个redraw 调用移动到.animate 回调，它将按预期工作。