Question

我试图让两个div在悬停时上下滑动，就像这里一样：http://goo.gl/Ti1hjF（参见有能力的部分）。在徘徊之后，第二个div的内容正在上下。我正在努力解决它。我究竟做错了什么？这是jquery：

$(".dormant").hover(function() {
var $detail = $(this).next(".detail")
if ($detail.is(":hidden")) {

    $detail.slideToggle(1000);
} else {
    $detail.slideUp('slow');
}
});

HTML：

<div class="col-md-4">
    <div class="detail-container">
  <div class="ivory dormant">
    <div class="col-md-3 col-xs-2 center-block"><span class="bigicon doormat"></span>    </div>
    <h4>PARTNERSHIP + RELATIONSHIP</h4>
    <p>We manage and deliver engagements and opportunities to further drive brand initiatives and further product and service objectives. We establish and implement targeted assessments which yield scalable results for our clients.</p>
    <div class="col-md-4 col-xs-3 center-block pop-up"><i class="glyphicon glyphicon-plus-sign"></i> details</div>
  </div>
  <div class="red detail">
    <div class="col-md-3 col-xs-2 center-block"><span class="bigicon doormat-white"></span></div>
    <h4>PARTNERSHIP + RELATIONSHIP</h4>
    <ul>
        <li>Asset Management</li>
        <li>Asset Development</li>
        <li>Consumer Introduction</li>
        <li>Relationship Management</li>
        <li>Channel Strategies</li>
    </ul>
   </div>
   </div>
  </div>

和css：

.ivory{
background:#e7e6e6;
padding:2em;
margin-top:2em;
}

.red{
background:#8b0000;
color:white;
padding:2em;
}
#capabilities .red h4{
    color:white;
}
.detail{
display:none;
position:absolute;
left:0;
top:0;
min-height:29em;
width:100%;
cursor:pointer;
}

.detail-container{
position:relative;
}

非常感谢提前。它真的让我发疯了。

jsFiddle

Answer 1

删除

else {
    $detail.slideUp('slow');
}

应该这样做。

这是更新后的jsFiddle

Answer 2

我不确定你是否在寻找这个......我已经改变了这样的代码。

$(".dormant").hover(function() {
var $detail = $(this).next(".detail")
if ($detail.is(":hidden")) {

 $detail.slideToggle(1000);
 } 
});

 $(".red.detail").click(function(){
 $(this).slideUp(1000);
 });

检查此DEMO

Updated demo

Answer 3

所以，我认为这仍然需要一些工作，但要解决你的问题：

$(".dormant").hover(function(e) {    
        var $detail = $(this).next(".detail")
        $detail.slideToggle(1000);
        $detail.hover(function(e) {}, function(e) {
           $detail.slideUp('slow');
        });
    }, function() {}
);

基本上为悬停添加一个空函数可以阻止奇怪的行为，至少可以让你找到正确的行。我意识到你可能会发挥一种效果，更像是让整个红色div滑动，但这可以解决你的“弹性”问题。

jsFiddle

Answer 4

删除$detail.slideUp('slow');后您可以使用onmousemove和onmouseout html属性来隐藏/显示所需的div。

Answer 5

这件事发生在我身上。我有一个额外的：悬停在该div上，图像没有正确的动画。检查你是否有两个：在div上盘旋。

jquery滑动div正在闪烁

5 个答案: