jQuery的滑动div闪烁

Question

I am trying to make two divs sliding up and down on hover exactly like here: http://goo.gl/Ti1hjF (see the capable section). after hovering, the content of second div is doing up and down. I am going nuts trying to solve it. what am I doing wrong? here's the 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>

and 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;
}

many thanks in advance. it is really driving me crazy.

jsFiddle

Answer 1

removing

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

should do the trick.

Here's an updated jsFiddle

Answer 2

I'm not sure whether you are looking for this or not.. I've changed the code like this.

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

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

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

check this DEMO

Updated demo

Answer 3

So, i think this still needs a bit of work, but to fix your immediately problem:

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

Basically adding an empty function for hover-out stops the odd behaviour and at least puts you on the right lines. I realise you're probably after an effect more akin to having the whole red div slide up, but this addresses your 'bouncy' problem.

jsFiddle

Answer 4

After removing $detail.slideUp('slow'); You can use onmousemove and onmouseout html properties to hide/show required div.

Answer 5

This happened to me ones. I had an additional :hover on that div and the images didnt animate properly. Check if you have two :hovers on the div.