javascript - 滚动时触发图表动画

Question

我目前正在 sacroll 上的 div 中淡入淡出，但在其中一个部分中，我有一个动画图表，但它在当前页面加载时动画。我需要它做的是当你在页面上滚动到它时触发它。这是我当前的js:

JS 代码

$(document).ready(function() {

    /* Every time the window is scrolled ... */
    $(window).scroll( function(){

        /* Check the location of each desired element */
        $('.hideme').each( function(i){

            var bottom_of_object = $(this).offset().top + $(this).outerHeight();
            var bottom_of_window = $(window).scrollTop() + $(window).height();

            /* If the object is completely visible in the window, fade it it */
            if( bottom_of_window > bottom_of_object ){

                $(this).animate({'opacity':'1'},500);

            }

        }); 

    });





Chart.defaults.global.animationEasing = 'easeInOutQuad',
Chart.defaults.global.responsive = true;
Chart.defaults.global.scaleOverride = true;
Chart.defaults.global.scaleShowLabels = false;
Chart.defaults.global.scaleSteps = 10;
Chart.defaults.global.scaleStepWidth = 10;
Chart.defaults.global.scaleStartValue = 0;
Chart.defaults.global.tooltipFontFamily = 'Open Sans';
Chart.defaults.global.tooltipFillColor = '#FFFFFF';
Chart.defaults.global.tooltipFontColor = '#6E6E6E';
Chart.defaults.global.tooltipCaretSize = 0;
Chart.defaults.global.maintainAspectRatio = true;

Chart.defaults.Line.scaleShowHorizontalLines = false;
Chart.defaults.Line.scaleShowHorizontalLines = false;
Chart.defaults.Line.scaleGridLineColor = '#fff';
Chart.defaults.Line.scaleLineColor = '#eee';

var chart = document.getElementById('chart').getContext('2d'),
  gradient = chart.createLinearGradient(0, 0, 0, 0);

var data = {
  labels: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'June'],

  datasets: [{
    label: 'Custom Label Name',
    fillColor: gradient,
    strokeColor: '#41AAE3',
    pointColor: '#41AAE3',
    pointStrokeColor: 'rgba(220,220,220,1)',
    pointHighlightFill: '#fff',
    pointHighlightStroke: 'rgba(220,220,220,1)',
    data: [5, 12, 28, 37, 60, 100]
  }]
};

gradient.addColorStop(0, 'rgba(255, 0,0, 0.5)');
gradient.addColorStop(0.5, 'rgba(255, 0, 0, 0.25)');
gradient.addColorStop(1, 'rgba(255, 0, 0, 0)');

var chart = new Chart(chart).Line(data);


});

Answer 1

将图表代码包装到函数中

var chartIsShown = false;

// .....

function chartInit() {
    chartIsShown = true;
    // chart code here
}

比在每个函数内部的“if isvisible”if添加另一个if:

if(this.id==="chartCanvasContainer" && chartIsShown===false) { // Add this
    chartInit();
}
$(this).animate({'opacity':'1'},500); // before this.

其中 id="chartCanvasContainer" 是分配给 #chart Canvas 的 hideme 父级的 ID:

<div class="hideme">Lorem ipsum</div>
<div class="hideme" id="chartCanvasContainer"> <!-- assign the ID! -->
    <canvas id="chart"></canvas>
</div>
<div class="hideme">foo bar ofc</div>
<!-- .etc. -->