0

ありがとうございます。私はjQueryが初めてで、これがStackに関する最初の質問です。

#B と #C の 2 つの div を左右にアニメーション化するトグル関数があります。

$("#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 内には、ウィンドウのサイズが変更されるたびに div #C に合わせて再描画されるWijmo 折れ線グラフウィジェットがあります。

$(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 に答える