title: How to detect if a div is visible in order to trigger another event (LazyLine Painter)
body: <p>I have searched through dozens of posts to try to find the solution to this but I am very new to jQuery and can't seem to figure it out. Basically I have two elements that are hidden on page load.</p>
  
  <pre><code>&lt;div id="correct" class="hidden"&gt;
      &lt;h5&gt; CORRECT! &lt;/h5&gt;
  &lt;/div&gt;
  
  &lt;div id="wrong" class="hidden"&gt;
      &lt;h5&gt; NOPE! TRY AGAIN &lt;/h5&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>I have an input box. 
  When the user inputs the correct answer and presses submit the #correct div is shown.</p>
  
  <pre><code>function guessAnswer() {
    $("button.guess-submit").click(function(event) {
  
    if ( $('#guess-input').val() == answer) {
        $('#correct').show();
        $('#wrong').hide();
    } else {
       $('#wrong').show();
   }
  </code></pre>
  
  <p>I am also using LazyLine Painter for svg drawing. When the #correct div is shown I want to edit one of the LazyLine options so that the drawing speed increases. Below is the basic code for LazyLine: </p>
  
  <pre><code>    var $logo = $('#sketch');
  
        $logo.lazylinepainter({
            'svgData': svgData,
            'strokeWidth': 1,
            'speedMultiplier': 3,
            'delay': 5,
            'strokeColor': '#b5287b',
                'drawSequential': true,
                'ease': 'easeInOutQuad'
        });
  
        setTimeout(function(){
            $logo.lazylinepainter('paint');
        }, 10)
  </code></pre>
  
  <p><a href="http://codepen.io/meloffbird/pen/RrMeeZ" rel="nofollow">current demo live on codepen</a></p>