jquery - Highcharts and jQuery animate: Snaps back to original size; only works when window is resized

Question

Frustrating issue... I'm rendering a chart via Highstock; works fine. I'm then using jquery animate to shrink the size of the chart when clicking on a certain link; also works fine. However, once the animation is complete, the chart just snaps back to the original size. When I resize the browser window, the chart goes to the right size (i.e. what it should be after the animation completes). It's almost like the chart needs to redraw; but I've tried calling the redraw option to no avail. Thanks for any help.

Here's my code:

 $("#PriceChart").animate({
   width: "250px"
 }, 1500 );

And my chart:

var pricechart;
$(document).ready(function() {
    pricechart = new Highcharts.StockChart({
        chart : {
            renderTo : 'PriceChart',
            margin: 1
        },
 yadda yadda yadda

Update jsfiddle: http://jsfiddle.net/GyY9m/8/

Answer 1

因为内部 div.highcharts-container具有固定的宽度和高度。例如，您可以设置：

#PriceChart {
    overflow: hidden;
}