jquery: Overlapping slideup div's. Clicking to fast messes it up

i'm having a problem with sliding divs using jquery. If I click the links to fast (for example the first link and right away the second link) the divs will overlap (what they should not do!). Here's my code:

<script type="text/javascript">

$(document).ready(function() {    
    $("div.slide").hide();

$('a.link').on('click', function(e) {

  e.preventDefault();
  var slideSelector = '#' + $(this).attr('id').replace('link', 'slide');

  $('div.slide').not(slideSelector).slideUp(1000, 'easeOutQuart', function() {
    $(slideSelector).slideDown(1000, 'easeOutQuart');
  });


  });      

});

</script>

Take a look at the DEMO and see what I mean. I would be very happy to hear from you guys!!

Solution

hmmm just add a boolean to check if it is clicked? I quickly tested it with my trackpad and it should work

$(document).ready(function() 
{    
    $("div.slide").hide();
    var clicked = false;
    $('a.link').on('click', function(e) 
   {

       if(!clicked)
       {
        e.preventDefault();
        clicked = true;
        var slideSelector = '#' + $(this).attr('id').replace('link', 'slide');

      $('div.slide').not(slideSelector).slideUp(1000, function() 
      {
          $(slideSelector).slideDown(1000, function(){
          clicked = false;
          });
      });
        }

  });      

});