Question

I do have a problem with a jquery. I have a divblock with “show_your_stuff”. When I do a mouse over another div-block appears, what I want. When I do a mouse over again, the divblock is getting away. I want that the divblock disappears after 60 seconds, when without doing a new mouse over again. Can somebody help me?

This is my code:

    <script type="text/javascript">
    $(document).ready(function() {
        $("a#controlbtn").hover(function(e) {
            e.preventDefault();
            var slidepx=$("div#linkblock").width() + 10;
            if ( !$("div#maincontent").is(':animated') ) { 
                if (parseInt($("div#maincontent").css('marginRight'), 10) < slidepx) {

                  $(this).addClass('close').html('Show your stuffs');
                    margin = "+=" + slidepx;

                     } else {
                    $(this).removeClass('close').html('Hide your stuffs');
                     margin = "-=" + slidepx;
                }
                $("div#maincontent").animate({ 
                    marginRight: margin
                }, {
                    duration: 'slow',
                    easing: 'easeOutQuint'
                });
            } 
        }); 

    });
</script>

Answer 1

You can use setTimeout and clearTimeout to postpone and cancel the hide effect when the mouse leaves and reenters respectively:

$(element).mouseover(function() {
    if (typeof delayTime != 'undefined')
        window.clearTimeout(delayTime);
    $('#tooltip').animate({/*CSS to show element*/},{duration: XXX, queue: false});
});
$(element).mouseout(function() {
    delayTime = window.setTimeout(function(){
        $('#tooltip').animate({/*CSS to hide element*/},{duration: XXX, queue: false});
    }, XXX);
});

…Where each XXX is a number representing delay or durration in milliseconds.