Question

我有一个jquery悬停。

它是div中的div，带有悬停的div称为.flip，扩展的div称为.panel。

当我走过时，悬停的bug .flip扩展.panel。但是面板位于div .flip中，所以悬停的翻转将大到.flip + .panel的大小。而.flip必须和.panel一样宽，我不想要......

我知道可以让.panel退出.flip，但它必须留在那里。当我将鼠标悬停在5个.flip中的一个上时，所有.panel都会扩展。所以我必须使用$ this。

第二个问题是，当我在.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/

悬停时jquery切换

1 个答案: