title: JQuery toggleClass() on and then back off (or remove)
body: <p>I am using an angular directive to have a left and right column of a page. <code>&lt;left-column&gt;&lt;/left-column&gt;</code> and <code>&lt;right-column&gt;&lt;/right-column&gt;</code>. When the user clicks an <code>&lt;a href="#target1"&gt;Target 1&lt;/a&gt;</code> then it finds the corresponding <code>&lt;div id="target1"&gt;Target 1&lt;/div&gt;</code> in the <em>right column</em>. </p>
  
  <p>That works fine and what I'm trying to do now is after it's clicked the specific div's background should kind of flash or something, I have some css for it. So I want to toggle that css class, then a second later remove that class (or toggle it off). </p>
  
  <p>I'm trying to use a <code>setTimeout()</code> function but it doesn't seem to be working. Any ideas? </p>
  
  <p>My <strong>error</strong> is: </p>
  
  <pre><code>Uncaught TypeError: Cannot read property 'toggleClass' of undefined 
  </code></pre>
  
  <p>My <strong>js</strong> is: </p>
  
  <pre><code>var highlight = {
  
      onReady: function() {
  
          $(document).on('click', 'left-column &gt; div', function(event) {
  
              var id = $('a', this).attr('href').split('#');
              var target = $('right-column &gt; div').find('#' + id[1]);
  
              target.toggleClass('gas');
              var junk = setTimeout(function(target) {
                  target.toggleClass('gas');
              }, 1000);
  
              event.preventDefault();
  
          });
  
      }
  
  };
  
  
  $(document).ready(highlight.onReady);
  </code></pre>