CODEWITHSUNDEEP
jquerycss
pagol
pagol

Reputation: 507

onclick div hide, setTimeout div hide

i am trying to do something. if click one add #add-conferance then menu will show .add-contact. when click hide then it show hide. also i make setTimeout 7sec but i want to this setTimeout will fired when my mouse on outside .add-contact it is meaning when mouse not on that menu then after few sec later menu will hide.

 $('#add-conferance').click(function () {
            $('.add-contact').animate({right: "0%"}, 600, 'swing');
      window.setTimeout(function(){$(".add-contact").animate({right: "-60%"}, 900, 'swing');}, 7000);
        return false;
 });

  $('#hide-conferance').click(function () {
            $('.add-contact').animate({right: "-60%"}, 600, 'swing');

        return false;
 });

DEMO

Upvotes: 1

Views: 54

Answers (1)

antyrat
antyrat

Reputation: 27765

You need to add mouseleave event to .add-contact then:

 $('#add-conferance').click(function () {
     $('.add-contact').animate({right: "0%"}, 600, 'swing');
     return false;
 });

  $('#hide-conferance').click(function () {
     $('.add-contact').animate({right: "-60%"}, 600, 'swing');
     return false;
 });

 $('.add-contact').mouseleave( function() {
     window.setTimeout(function(){$(".add-contact").animate({right: "-60%"}, 900, 'swing');}, 7000);
 });

demo

And if you want it to not hide if user moves mouse outside block and then point it there again before 7000ms pass you need to add timeout handler and use mouseenter event:

 var hideHandler;
 $('.add-contact').mouseleave( function() {
     hideHandler = window.setTimeout(function(){$(".add-contact").animate({right: "-60%"}, 900, 'swing');}, 7000);
 });
 $('.add-contact').mouseenter( function() {
   window.clearTimeout(hideHandler);
 });

demo

Upvotes: 1

Related Questions