CODEWITHSUNDEEP
javascriptjqueryjquery-uijquery-events
user1261800
user1261800

Reputation:

Jquery Timer Slide function

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 );
});

Upvotes: 0

Views: 1668

Answers (6)

vansimke
vansimke

Reputation: 974

Try this: http://jsfiddle.net/vansimke/cJ5pf/

I hooked into the mouseleave event and added a setTimeout. You might need to catch the timeout if you need to cancel it later (i.e. they reenter the arrow)

Upvotes: 1

j08691
j08691

Reputation: 208032

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.

Upvotes: 0

Rory McCrossan
Rory McCrossan

Reputation: 337714

You need to use setTimeout() to set the delay to closing the div. You also need to use clearTimeout() in the opening function to stop it auto closing if someone mousesout, then back over again:

var timeout;
$("#arrow").hover(
    function() {
        clearTimeout(timeout); // clear the timer which will close the div, as we now want it open
        $("#inner").stop().animate({
            marginRight: "0px",
            opacity: "1px",
            height: "100px"
        }, 500);
    }, function() {
        timeout = setTimeout(function() {
            $("#inner").stop().animate({
                marginRight: "-100px",
                opacity: "1px",
                height: "100px"
            }, 500);                
        }, 1000); // close the open div 1 second after mouseout.
    }
);

Example fiddle

Upvotes: 0

jeffery_the_wind
jeffery_the_wind

Reputation: 18238

see the fiddle here: http://jsfiddle.net/eMsQr/51/

it uses the mouseleave jquery and also delay. Change the value in the delay to get the time you want.

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

Upvotes: 0

Alexander Kahoun
Alexander Kahoun

Reputation: 2488

Inside the hover function you can add an additional line to trigger the click event using the below line:

setTimeout(function() { $("#arrow").trigger('click'); }, 5000);

the 5000 is the number of milliseconds to wait before triggering the click.

Upvotes: 0

hohner
hohner

Reputation: 11588

You need to make sure you utilize the second function() in jQuery's hover method.

At the moment you're only animating your slide-out div when the user hovers over the main div. You want it to also animate on hover out.

Here's the updated jsFiddle.

Upvotes: 0

Related Questions