onclick div hide、setTimeout div hide

Question

私は何かをしようとしています。 1つをクリックするとが追加されます。#add-conferanceの場合、メニューは.add-contactと表示されます。 をクリックすると、が表示されます。また、私はsetTimeout 7秒を作るが、私はこのsetTimeoutにしたいときに外に私のマウス.add-contactそれはマウスがそのメニューにないときに数秒後のメニューが隠れることを意味します。

$('#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

をそして、あなたはそれを隠していないしたい場合、ユーザは、ブロックと外にマウスを移動した場合：DEMO

Answer 1

$('#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; 
}); 

はその後、.add-contactにmouseleaveイベントを追加する必要がありますあなたがタイムアウトハンドラを追加して使用する必要がある7000ms前にもう一度ポイントしてmouseenterイベント：

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