Question

Hi I would like to slide an element out when the mouse goes over and then slide it back and hide when the mouse goes out..I have this code, but I have problem when the mouse leave the element before the first mouseenter function is completed..The .entry_extend div stay visible. I tried to the hover function, but is the same problem..Please help..Thanks.

jQuery("document").ready(function(){
                    jQuery(".fire").mouseenter(function(){
                        jQuery(this).children('.entry_extend').stop(true, false).show('slide',null,500,null);

                    });
                    jQuery(".fire").mouseleave(function(){
                        jQuery(this).children('.entry_extend').stop(true, false).hide('slide',null,500,null);
                    });

                });


<div id="craft" class="fire">
       <div class="entry_main">
           <a href="" title="">
             <img src="" alt="" />
            </a>
        </div>
        <div id="entry_ex_craft" class="entry_extend">
           <a href="" title="">original shisha pipe collection</a>
    </div>
 </div>

Please Help:)

Answer 1

You are trying to implement a “hover”. This works:

jQuery(".fire").hover(
    function(){jQuery('.entry_extend', this).stop(true, true).show(500);}
    ,
    function(){jQuery('.entry_extend', this).stop(true, true).hide(500);}
); 

Mind you, it isn’t a good idea to have the DIV you are sliding in and out within the DIV you are hovering on, since HIDING the DIV alters the boundaries of the DIV containing it. You can end up with some “trembling” activity sometimes because of this.