jquery切換懸停

Question

我有一個jquery懸停。

它是div中的div，懸停的div被稱爲.flip，擴展的div被稱爲.panel。

懸停錯誤，當我去.flip擴展.panel。但面板位於div .flip中，因此懸停翻轉將會大到.flip + .panel的大小。並且.flip必須和.panel一樣寬，我不想要。

我知道它可能讓.panel出.flip，但它必須留在那裏。否則，當我懸停在5個.flip中的一個上時，所有.panel的擴展都會擴展。所以我必須使用$這個。

第二個問題是，當我在.flip上執行2,3,4次或更多次時，.panel將擴展2,3,4次或更多次，並且看起來很遲鈍。

你能幫我嗎？我對jquery一無所知，所以我甚至不知道在哪裏尋找。

代碼：

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"> 
</script> 

<script> 
$(document).ready(function(){ 
    $(".flip").hover(function(){ 
     $(this).find(".panel").slideToggle("slow"); 
    }); 
}); 
</script> 

CSS：

<style type="text/css"> 
.flip{ 
    cursor: pointer; 
    background-color:white; 
    width:490px; 
    margin-left: 43px; 
    color:#1667b2; 
    text-align:center; 
    border-top; 2px #1667b2 solid 
    display:block; 
} 

.panel 
{ 
    width:490px; 
    color:white; 
    background-color:#1667b2; 
    float:left; 
    margin:0px; 
    display:none; 
    padding:5px; 
} 

#meerreferenties { 
    width:auto; 
    float:left; 
} 

</style> 

HTML：

<div class="flip">Klik hier voor meer informatie. 
    <div class="panel">Hier komt de informatie te staan over de hosting van Chocstar. 
     Hier komt de informatie te staan over de hosting van Chocstar. 
     Hier komt de informatie te staan over de hosting van Chocstar. 
     Hier komt de informatie te staan over de hosting van Chocstar. 
     Hier komt de informatie te staan over de hosting van Chocstar. 
     Hier komt de informatie te staan over de hosting van Chocstar. 
    </div> 
</div> 

小提琴：http://jsfiddle.net/4bTL5/

Answer 1

使用.stop([clearQueue ] [, jumpToEnd ])

$(this).find(".panel").stop(true,true).slideToggle("slow"); 

小提琴：http://jsfiddle.net/4bTL5/1/