Question

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.

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.

The only way which makes the element stop doing that at the moment is by refreshing.

can any one guide me in solving this issue?

Many thanks

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 this….

 $(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/