Bootstrap Collapse "Hide" while collapsing in not working

Question

I'm having an issue with implementing Bootstrap collapse on a Liferay structure I am creating. The structure is a link image that, when the user hovers over it, fades into another image and has an info box with text collapse in. Everything works great, however if I mouseleave before the collapsein is finished, the div will stay instead of collapsing on itself. Here's the code for it (I've removed all of the Velocity for simplicity's sake):

$(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>

Is there anything I am doing wrong with the collapse?

Thank you!

Answer 1

I ended up not getting an answer, but a dev at my work found a solution. Instead of using collapse, I used slideUp() and slideDown(), which worked perfectly.

This is my new 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);
        });
});