title: Disable until animation complete
body: <p>I need to disable this entire script until the animation is complete so it doesn't cause it to mess up the css.</p>
  
  <p>Ex: <a href="http://jsfiddle.net/qspSU/" rel="nofollow">http://jsfiddle.net/qspSU/</a></p>
  
  <p>I was told I need to use a semaphore or mutux variable but I can't find any information on them.</p>
  
  <p>JQUERY</p>
  
  <pre><code>var speed = 'slow'; /* Change this to 5000 to see the movement more clearly */
  var imglist = $("#center-photo img");
  var listsize = imglist.size();
  imglist.filter(':first').show();
  
  $("#total").html(listsize);
  
  $('#prev').click(function() {
      var active = imglist.filter(':visible');
      var prev = active.prev();
  
      if (prev.size() == 0) {
          prev = imglist.filter(':last');
      }
  
      var pos = active.position();
  
      var curid = $("#outof").html();
      if(curid == 1) {
          $("#outof").html(listsize);
      }else{
          $("#outof").html(curid - 1);
      }
  
      //Move current image out
      active.animate(
          {
              left: (pos.left + 250),
              opacity: 'hide'
          },
          {
              duration: speed,
              complete: function() {
                  // Display next one and move in
                  prev.css('opacity', 0).show().css('left', (pos.left - 250) + "px");
                  prev.animate(
                      {
                          left: pos.left,
                          opacity: 1
                      }, {
                          duration: speed
                      });
              }
          });
  });
  
  $('#next').click(function() {
      var active = imglist.filter(':visible');
      var next = active.next();
  
      if (next.size() == 0) {
          next = imglist.filter(':first');
      }
  
      var pos = active.position();
  
      var curid = $("#outof").html();
      if(curid == 5) {
          $("#outof").html("1");
      }else{
          var newValue = parseInt(curid) + 1;
          $("#outof").html(newValue);
      }
  
      //Move current image out
      active.animate(
          {
              left: (pos.left - 250),
              opacity: 'hide'
          },
          {
              duration: speed,
              complete: function() {
                  // Display next one and move in
                  next.css('opacity', 0).show().css('left', (pos.left + 250) + "px");
                  next.animate(
                      {
                          left: pos.left,
                          opacity: 1
                      }, {
                          duration: speed
                      });
              }
          });
  });
  </code></pre>