title: Slide toggle Jquery sometimes gets stuck I have no idea why
body: <p>Hi basically I have a element when I hover over it I have a div that slides up from the bottom and when I stop hovering over the element the div slides back down. </p>
  
  <p>Currently I have it working, however on odd occasions the div that slides up and down gets stuck and the sliding up and down is reversed and I have no idea why. By reversed I mean when I'm not hovering the div element is shown and then when I hover it slides down.</p>
  
  <p>The only way which makes the element stop doing that at the moment is by refreshing.</p>
  
  <p>can any one guide me in solving this issue?</p>
  
  <p>Many thanks</p>
  
  <p>Code: 
  JAVA SCRIPT</p>
  
  <pre><code>      $(document).ready(function () 
         {
          $("div.small_info_container").hover(function () 
          {  
            $(this).parent().find('div.small_slide_info_container').slideToggle("fast");
          });
        });
  </code></pre>
  
  <p>CSS:</p>
  
  <pre><code>.elem {
  width: 248px;
  height: 238px;
  margin: 10px 0 0 5px;
  float: left;
  border: 1px solid #ACACAC;
  background: white;
  box-shadow: 3px 4px 2px -2px #CACACA;
  -webkit-border-radius: 3px;
  -moz-border-radius: 3px;
  border-radius: 3px;
  
  }
  
  .small_info_container {
  position: absolute;
  width: 248px;
  height: 238px;
  background:transparent;
  }
  
  .small_slide_info_container {
  position: absolute;
  width: 248px;
  height: 45px;
  background: rgba(173, 173, 173, 0.36);
  display: none;
  bottom: 0;
  }
  </code></pre>
  
  <p>HTML</p>
  
  <pre><code>&lt;div class="elem"&gt;
      &lt;div class="small_info_container"&gt;
          &lt;div class="small_slide_info_container"&gt;
          &lt;/div&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>