title: end a setTimeout function before its set time
body: <p>i have a jquery function that when clicked produces a set timeout on making a div visible.</p>
  
  <p>however, if another option is selected during the settimeout length, i would like to know how to destroy this function and stoop anything else in it happening.</p>
  
  <p>my current code is:</p>
  
  <pre><code>$(document).ready(function () {
  
      $('li#contact').click(function () {
          $('ul.image_display').css('display', 'none');
          $('ul.projects').fadeOut().hide();
          $('li#cv').removeClass('cur');
          $('li#projects').removeClass('cur');
          $('li#contact').addClass('cur');
          $('ul.contact').fadeIn(function () {
              setTimeout(function () {
                  $('ul.contact').fadeOut('slow');
              }, 8000);
          });
          setTimeout(function () {
              $('li#contact').removeClass('cur');
              $('li#cv').addClass('cur');
              $('ul.projects').fadeIn('slow');
              $('ul.image_display').css('display', 'block');
          }, 8625);
  
      });
  
  }); 
  </code></pre>
  
  <p>a bit cumbersome but works until this is clicked:</p>
  
  <pre><code>$(document).ready(function () {
  
      $('#projects').click(function () {
          $('li#cv').removeClass('cur');
          $('ul.contact').fadeOut().hide();
          $('#contact').removeClass('cur');
          $('ul.projects').fadeIn('slow');
          $('#projects').addClass('cur');
          $('ul.image_display').css('display', 'block');
      });
  
  });
  </code></pre>
  
  <p>if the second is clicked just after the first than class 'cur' still comes up on li#cv after the set time.</p>