title: Fire jquery animation when scrolled to
body: <p>Im using some jquery to animate a bar graph but it is far enough down the page that the user will need to scroll to see it.</p>
  
  <p>How do I set it to animate when the user has scrolled to its location.</p>
  
  <p></p>
  
  <pre><code>arrayOfDataMulti = new Array(
          [[936656,556247],'2005'],
          [[913318,453238],'2006'],
          [[921707,362327],'2007'],
          [[894496,376587],'2008'],
          [[738624,326656],'2009'],
          [[759379,311336],'2010'],
          [[746972,332962],'2011'],
          [[666210,295708],'2012'],
          [[568817,286204],'2013'],
          [[548247,315037],'2014']
  
      );  
  
  arrayOfDataMultiForSort = new Array(
          [[936656,556247],'2005'],
          [[913318,453238],'2006'],
          [[921707,362327],'2007'],
          [[894496,376587],'2008'],
          [[738624,326656],'2009'],
          [[759379,311336],'2010'],
          [[746972,332962],'2011'],
          [[666210,295708],'2012'],
          [[568817,286204],'2013'],
          [[548247,315037],'2014']
      );  
  
  arrayOfColors = new Array('#006446','#6ebd44');
  
  $('#exampleMulti').jqbargraph({ data: arrayOfDataMulti, colors: arrayOfColors,legends: ['Scope 1 / Direct','Scope 2 / Indirect'],
  </code></pre>
  
  <p>legend: true });</p>
  
  <pre><code>$('#multiMulti').click(function(){
      $('#exampleMulti').html('');
      $('#exampleMulti').jqbargraph({ data: arrayOfDataMulti, colors: arrayOfColors, type: 'multi' });
      $('#multiDyn').html(",&lt;br /&gt;&amp;nbsp;&amp;nbsp; type: 'multi'");               
  });
  
  $('#multiLegend').click(function(){
      $('#exampleMulti').html('');
      $('#exampleMulti').jqbargraph({ data: arrayOfDataMulti, colors: arrayOfColors, legend: true, legends: ['ads','leads','google ads'] });
      $('#multiDyn').html(",&lt;br /&gt;&amp;nbsp;&amp;nbsp; legends: ['ads','leads','google ads'],&lt;br /&gt;&amp;nbsp;&amp;nbsp; legend: true");               
  }); 
  
  
  
  $('#multiSortDesc').click(function(){
      $('#exampleMulti').html('');
      $('#exampleMulti').jqbargraph({ data: arrayOfDataMultiForSort, colors: arrayOfColors, sort: 'desc' });
      $('#multiDyn').html(",&lt;br /&gt;&amp;nbsp;&amp;nbsp; sort: 'desc'");                
  });
  
  $('#multiPrePost').click(function(){
      $('#exampleMulti').html('');
      $('#exampleMulti').jqbargraph({ data: arrayOfDataMulti, colors: arrayOfColors, prefix: '$', postfix: 'k' });
      $('#multiDyn').html(",&lt;br /&gt;&amp;nbsp;&amp;nbsp; prefix: '$',&lt;br /&gt;&amp;nbsp;&amp;nbsp; postfix: 'k'");             
  }); 
  
  $('#multiHideValues').click(function(){
      $('#exampleMulti').html('');
      $('#exampleMulti').jqbargraph({ data: arrayOfDataMulti, colors: arrayOfColors, showValues: false });
      $('#multiDyn').html(",&lt;br /&gt;&amp;nbsp;&amp;nbsp; showValues: false");               
  }); 
  
  $('#multiNoAnimate').click(function(){
      $('#exampleMulti').html('');
      $('#exampleMulti').jqbargraph({ data: arrayOfDataMulti, colors: arrayOfColors, animate: false });
      $('#multiDyn').html(",&lt;br /&gt;&amp;nbsp;&amp;nbsp; animate: false");              
  });         
  
  $('#multiClear').click(function(){
      $('#exampleMulti').html('');
      $('#exampleMulti').jqbargraph({ data: arrayOfDataMulti, colors: arrayOfColors });
      $('#multiDyn').html("");                
  }); 
  &lt;/script&gt;
  </code></pre>