Question

What I’m trying to do is, when the page loads a box appears after 3 seconds and if nothing happens, it gets partially hidden after 3 seconds. Now if the cursor enters the box, timeout is cleared and the ad won’t be getting hidden as I’m clearing the timeout.

The problem is when the mouse leaves and enters again, the previous timeout is still there. Though I’m trying to clear the timeout but it still hides the box. What can be the problem?

See my code: (JSfiddle link: http://jsfiddle.net/aK9nB/)

var pstimer;

$(document).ready(function(){
    setTimeout(function(){
        showps();
        pstimer = setTimeout(function() {
                hideps();
        }, 3000);
    }, 3000);
});

$('#psclose').on('click', function(){
    $('#postsearch-container').hide();
});

$("#postsearch-container").hover(
    function () {
        console.log("enter");
        clearTimeout(pstimer);
        console.log("cleartimeout");
        showps();
    }, 
    function () {   
        console.log("leave");
        clearTimeout(pstimer);
        var pstimer = setTimeout(function(){
            hideps();
    } , 3000);
});

function showps() { 
    $("#postsearch-container").stop();
    $('#postsearch-container').animate({
        bottom: '0'
    }, 'slow');
}

function hideps() {
    $('#postsearch-container').animate({
        bottom: '-115'
    }, 'slow');
}

Answer 1

$("#postsearch-container").hover(
    function () {
        console.log("enter");
        clearTimeout(pstimer);
        console.log("cleartimeout");
        showps();
    }, 
    function () {   
        console.log("leave");
        clearTimeout(pstimer);
        pstimer = setTimeout(function(){ // remove the "var" 
            hideps();
        } , 3000);
    }
);