JQuery slide switch sometimes gets stuck, I have no idea why

Question

Hi, basically I have an element when I hung over it. I have a div that slides below, and when I stop hovering over the element, the div will shift backward.

I currently have a job, however, on odd times, a div that slides up and down gets stuck, and sliding up and down changes direction, and I have no idea why. On the contrary, I mean, when I do not overhang, the div element is displayed, and then when I hover it over slides.

The only way that an element stops doing this at the moment is refreshing.

can someone help me in solving this problem?

Thank you very much

Code: JAVA SCRIPT

$(document).ready(function () { $("div.small_info_container").hover(function () { $(this).parent().find('div.small_slide_info_container').slideToggle("fast"); }); }); 

CSS

 .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; } 

HTML

 <div class="elem"> <div class="small_info_container"> <div class="small_slide_info_container"> </div> </div> </div> 

Answer 1

Try it....

  $(document).ready(function () { $("div.small_info_container").mouseover(function () { $(this).parent().find('div.small_slide_info_container').stop().slideDown("fast"); }).mouseleave(function(){ $(this).parent().find('div.small_slide_info_container').stop().slideUp("fast"); }) });​ 

DEMO: http://jsfiddle.net/mSWP8/7/