0

提前谢谢。我是 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 折线图小部件，每当调整窗口大小时，它都会重新绘制以适合 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 变大，图表会变小。

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

4

1 回答 1

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回调，它将按预期工作。

于 2013-01-03T17:52:29.893 回答