Question

Right now I have a div that slides right to left and then vice versa back to its original place. But overall its not really how I want it to work. My main goal: is for the user to hover over the main div which will then pull out the sliding div. The part that gets tricky is the following: If the user forgets to slide the dive back, I want to give it time frame that will cause it to close automatically after a certain time has passed. Here is my working code so far: jsfiddle.net/eMsQr/14/.

My JavaScript function:

$(document).ready(function() {
  $("#arrow").hover(
    function(){
      $("#inner").stop().animate({marginRight: "0px", opacity: "1px", height: "100px"}, 500 );
    },
    function(){}
  );
});


$("#arrow").click(function(e){
    $("#inner").stop().animate({marginRight: "-100px", opacity: "1px", height: "100px"}, 500 );
});

Answer 1

Here’s a jsFiddle example that sets a 3 second delay via the setTimeout function.:

jQuery

var cto;
$("#arrow").hover(
function() {
    clearTimeout(cto);
    $("#inner").stop().animate({
        marginRight: "0px",
        opacity: "1px",
        height: "100px"
    }, 500);
}, function() {
    cto = setTimeout(function(){$('#arrow').trigger('click')}, 3000);
});


$("#arrow").click(function(e) {
    $("#inner").stop().animate({
        marginRight: "-100px",
        opacity: "1px",
        height: "100px"
    }, 500);
});​

Note that if the user moves his mouse away and then returns it to the div, the box remains open again until they leave at which point the 3 second countdown timer begins.