ブートストラップ折りたたんでいない状態で「非表示」にする

Question

作成中のLiferay構造にブートストラップの折りたたみを実装する際に問題があります。構造はリンクイメージで、ユーザーがその上にマウスを置くと、別のイメージにフェードインし、テキストボックスがあります。すべてがうまくいきますが、collapseinが完了する前にマウスを動かすと、divは折りたたまれずに残りますそれ自体でここでのコードは、（私は簡単にするためのベロシティのすべてを削除しました）です：

$(document).ready(function(){ 
 
    $(".panel-links-strt .img-container").hover(     
 
    function(){ 
 
     $(this).find(".collapse-panel-info").stop().collapse("show"); 
 
     $(this).find(".PanelHoverImage").stop().fadeTo(150, 1); 
 
     $(this).find(".PanelMainImage").stop().fadeTo(250, 0); 
 

 
    }, 
 
    function(){ 
 
     $(this).find(".collapse-panel-info").stop().collapse("hide"); 
 
     $(this).find(".PanelMainImage").stop().fadeTo(250, 1); 
 
     $(this).find(".PanelHoverImage").stop().fadeTo(150, 0); 
 
    }); 
 
});

.panel-link-title{ 
 
    color: black; 
 
    margin-bottom: 0; 
 
    font-weight: bold; 
 
    padding: 4px 10px 4px 10px; 
 
} 
 

 
.panel-link-title-background{ 
 
    background-color: white; 
 
    display: inline-block; 
 
    position:absolute; 
 
    z-index: 8; 
 
    border-bottom-right-radius: 5px; 
 
    max-width: 130px; 
 
} 
 

 
.panel-links-strt .img-container{ 
 
    float: left; 
 
    display: inline-block; 
 
    margin: 5px; 
 
    position: relative 
 
} 
 

 
.panel-links-strt .PanelMainImage{ 
 
    position: absolute; 
 
    z-index: 2; 
 
} 
 
.panel-links-strt .PanelHoverImage{ 
 
    position: absolute; 
 
    z-index:1; 
 
} 
 

 
.panel-links-strt.hover-photo-container a:hover{ 
 
    text-decoration:none; 
 
} 
 
a.hover-photo-container{ 
 
    height: 240px; 
 
    width: 240px; 
 
} 
 

 
.collapse-panel-info{ 
 
    background-color: black; 
 
    position: absolute; 
 
    z-index: 12; 
 
    bottom:0; 
 
    border-top-right-radius: 5px; 
 
    border-top-left-radius: 5px; 
 
    text-align: center; 
 
} 
 
.collapse-panel-info-text{ 
 
    padding: 8px; 
 
}

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css"> 
 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script> 
 
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script> 
 
<div class="panel-links-strt hover-photo-container"> 
 
    <a class="hover-photo-container" style="height: 240px; width: 240px;" href="testlink.com"> 
 
    <div class="img-container" style="height: 240px; width: 240px;"> 
 
     <div class="panel-link-title-background"> 
 
     <p class="panel-link-title">Test Title</p> 
 
     </div> 
 
     <img style="height: 240px; width: 240px;" class="PanelMainImage" src="https://upload.wikimedia.org/wikipedia/commons/c/c4/PM5544_with_non-PAL_signals.png"> 
 
     <img style="height: 240px; width: 240px;" class="PanelHoverImage" src="http://necessaries.tk/images/testPattern.png"> 
 
     <div class="collapse-panel-info collapse" style="height:80px; width:240px;"> 
 
     <div class="collapse-panel-info-text"> 
 
      Test Panel Text 
 
     </div> 
 
     </div> 
 
    </div> 
 
    </a> 
 
</div>

は、私は崩壊と間違ってやっているものはありますか？

ありがとうございました！

Answer 1

私は答えを得られなかったが、私の仕事の開発者は解決策を見つけた。折りたたみを使用する代わりに、私はslideUp（）とslideDown（）を使用しました。これは完全に機能しました。

これは私の新しいJavaScriptのである：

$(document).ready(function(){ 
    $(".panel-links-strt .img-container").hover(     
     function(){ 
      $(this).find(".collapse-panel-info").stop().slideDown(400); 
      $(this).find(".PanelHoverImage").stop().fadeTo(150, 1); 
      $(this).find(".PanelMainImage").stop().fadeTo(250, 0); 

     }, 
     function(){ 
      $(this).find(".collapse-panel-info").stop().slideUp(200); 
      $(this).find(".PanelMainImage").stop().fadeTo(250, 1); 
      $(this).find(".PanelHoverImage").stop().fadeTo(150, 0); 
     }); 
});