jQuery раздвижные div мерцают

Question

Я пытаюсь сделать два div сползая вверх и вниз на hover точно так же, как здесь: 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.