Hi there,

There is a div. When the mouse is over it the div is shown and it is hidden when the mouse is out. The script is here.

<script type="text/javascript">

$(document).ready(function() {

    function runToggle(){

        $("#effect").toggle('blind', [], 500);

    };

$('#mini-wrap').mouseover(function() {

runToggle();

return false;

});

$('#mini-wrap').mouseleave(function() {

$('#effect').effect('blind');

});

$('#effect').hide();

});

</script>

Html

<div id="mini-wrap" style="width:250px;">

<div id="mini">

<span>Mouse over show demo div</span>

</div>

</div>

<div class="demo">

<div class="toggler">

<div id="effect" class="ui-widget-content ui-corner-all">

<h3 class="ui-widget-header ui-corner-all">Show</h3>

<p>

Etiam libero neque, luctus a, eleifend nec, semper at, lorem. Sed pede. Nulla lorem metus, adipiscing ut.

</p>

</div>

</div>

</div><!-- end demo -->

The problem is that there is no time delay for showing/hidding the div. When the mouse is over/out the div several times, the div is shown/hidden several times as well. How can I have the code to prevent this behaviour and only display/hide the div when the mouse stays on/out the div for a second?

Thank you very much!