タイマを使って、他のdivにカーソルを置いたときにdivを下に移動

Question

私はこれを検索しましたが、私の問題を完全に解決した解決策は見つかりませんでした。

私はお互いの上にある2つのdivを持っています。 div＃2は表示されません(display:none)。

私が欲しいのは、div＃1の上にマウスを置くと、div＃2が現在の位置で下にスライドすることです。

div＃2にホバーしているときにdiv＃2を開いたままにし、div＃2のホバー状態を5秒以上離してdiv＃2を再びスライドさせます。

a fiddleは私のdivポジションを説明しました。

Answer 1

コードは簡単です。あなたが望むことをする1つの方法は、グローバル変数をsetTimeout関数とペアにすることです。タイムアウトは、マウスが5秒後にdivからまだ離れているかどうかをチェックし、そうであれば、それをスライドさせて見えなくします。

$('.button').click(function() { 
    $('.showme').slideDown(); 
}); 

$('.showme').mouseout(function() { 
    window.isoverdiv = false; 
    setTimeout(function() { 
     if (!window.isoverdiv) { 
      $('.showme').slideUp(); 
     } 
    }, 5000); 
}); 

$('.showme').mouseover(function() { 
    window.isoverdiv = true; 
}); 

Answer 2

は私がのdiv＃1へのdiv＃2を移動し、これは私が唯一のCSSでこれを行うには許可保つためのjQueryを使用した http://jsfiddle.net/57Shn/

CSS

.button {width:100px; height:50px; position:fixed; background-color:blue; margin-top:30px;} 
.button:hover .showme {display:block} 
.showme {width:100px; height:200px; position:fixed; background-color:red; display:none; margin-top:30px;} 

HTML

<div class="button"> 
    touch me 
    <div class="showme">show me</div> 
</div> 

Answer 3

CSSのみの溶液：（摺動しない）

<div class="outer"> 
    <div class="one">Hover</div> 
    <div class="two">Hello World!</div> 
</div> 

CSS：

.two { display: none; } 
.outer:hover .two { display: block; } 

JS溶液：

$(function() { 
    $('.two').hide(); 
    $('.outer').hover(function() { $('.two').stop().slideDown(); }); 
    $('.outer').mouseout(function() { $('.two').stop().slideUp(); }); 
});