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一无所知，所以我甚至不知道在哪里搜索。

以下是链接：http://staging.skyberate.nl/shared-hosting/magento-hosting/referenties/

代码：

<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

就像改变你的jQuery一样简单：

$(".flip").hover(function(){
    $(this).find(".panel").slideToggle("slow"); 
});

为：

$(".flip").hover(function(){
    $(this).find(".panel").stop().slideToggle("slow"); 
});

JSFiddle demo

<强>解释

这基本上只会停止当前的jQuery动画.slideToggle。它不会完成动画（转到底部），但会立即返回，因为它应该是slideToggle函数上的hover动画。

额外帮助：

昨天我帮助了你，我知道你想要什么，我修复了你的CSS，我认为这不是你想要的。

JSFiddle with blueline ^^

Answer 2

对于您的第一个问题，您可以position:absolute使用child div，因此parent div将不会height absolute div，而对于第二个问题，您可以在stop()之前使用slideToggle。检查一下...... http://jsfiddle.net/4bTL5/14/

Jquery切换幻灯片错误

2 个答案: