title: jQuery slide div left to right on hover
body: <p>I'd like to fix this jquery left to right div on hover: <a href="http://jsfiddle.net/PXLJG" rel="nofollow">http://jsfiddle.net/PXLJG</a></p>
  
  <p>HTML:</p>
  
  <pre><code>&lt;div class="holdingbox"&gt;
  &lt;span class="rightbox"&gt;
      &lt;span class="content"&gt;Kenyér&lt;/span&gt;
  &lt;/span&gt;
  &lt;span class="leftbox"&gt;&gt;&lt;/span&gt;
  </code></pre>
  
  <p>jQuery: </p>
  
  <pre><code>$('.holdingbox').hover(function(){
      $('.rightbox').animate({width: '90px'}, 1000)
  }, function(){
      $('.rightbox').animate({width: '-0'}, 1000)
  });
  </code></pre>
  
  <p>CSS:</p>
  
  <pre><code>div {
      display : inline-block;
  }
  .holdingbox {
      position: relative;
      top: 0;
      margin-left: 100px;
  }
  
  .leftbox {
      position: relative;
      top: 0;
      left: 0;
      display: inline-block;
      font-size: 24px;
      background-color: #ac193d;
      color: #FFF;
      font-weight: bold;
      padding: 1px;
  }
  .rightbox {
      position: relative;
      display: inline-block;
      overflow: hidden;
      width: 0;
      height: 30px;
      vertical-align: top;
      margin-right: 0;
  }
  .content{
      width: 100px;
      position: absolute;
      background-color: #ac193d;
      height: 29px;
      left: 0;
      top: 0;
      right: 0;
      color: #FFF;
      padding-left: 5px;
  }
  </code></pre>
  
  <p>For example: <a href="http://www.jamieoliver.com/" rel="nofollow">http://www.jamieoliver.com/</a> -> slider previous next arrow on hover (I need that!!)</p>
  
  <p>My problem is when I trying to hover on the ">" (arrow) it is working sliding left to right. But when I hovering again and again and again while animate sliding to 'width:0' and I leave my mouse from the div the animate don't stop and still hovering left to right for X times I hovered on the div. Can anyone solve this how can I fix this problem?</p>
  
  <p>P.S.: I guess this problem can be solved by .stop() function. How?</p>