javascript - Bootstrap 3/jquery 2 - 单击时展开切换文本区域(覆盖)

Question

我有一张卡片，里面有一张图片。这是 JSFIDDLE DEMO .基本上我想分两步做一个 Action :

1. 将鼠标悬停在图像/卡片上时，会切换 Bootstrap 文本 Accordion 。这很好用。

2. 当我单击刚刚切换的 txt 中的“+”图标时，我希望叠加层向上移动，就好像它被切换得更多以填充整个卡片一样。 我没能实现。

3. 汽车就这样保持不变。如果用户点击“关闭图标”，叠加层将“切换回来”。

为了向您展示我希望它的行为方式，我制作了 a video GIF on imgur .

注意:在此视频中，您看不到我的指针/鼠标，但当单击“加号图标”时，文本覆盖“向上移动”到顶部。

如何在 css/javascript/jquery 中实现这种效果？

我正在使用 bootstrap 3 和 jquery 2。

代码

HTML

<div class="center jumbotron">

<div id="deal-zone">
      <ul class="cards-list">

  <li class="card 353">      
    <div class="card-content">        

      <div class="card-image">        
        <a href="/operations/thisiscool"></a>
          <figure>
          <a href="/operations/thisiscool">            
            <img style="opacity: 1; display: block;" id="HPImageBanner_353" src="http://vp-eu.scene7.com/is/image/vpeu/0/00_54093_FR_brandvisualnbrandvisualfr">           

            <!-- operation card's short details on 2-column view-->
            </a>
            <figcaption id="tek" class="card-short-info">
              <a href="/operations/la-semaine-de-la-beaute-a-paris-111"></a>
              <a class="moreInfo" id="BtnHomeOperationExpand_5331345" role="button" data-toggle="collapse" data-parent="#accordion" href="#collapseTwo" aria-expanded="true" aria-controls="collapseTwo">
                <i class="glyphicon glyphicon-plus detail-icon_353"></i>
               </a>            
              <div class="short-info-content">                
                <a id="dateSales_53120" class="dateSales _saleLink" href="/operations/la-semaine-de-la-beaute-a-paris-111">Jusqu'au <span class="outstandingwords">12 novembrex</span></a>                      
              </div>
            </figcaption>
          </figure>        
      </div>

    </div> 
       <div id="collapseTwo" class="collapse left-aligned" role="tabpanel" aria-labelledby="headingTwo">
            <div class="infoSales">
                <a id="info" class="moreInfo"></a>
                this is the big details i want                
            </div>

      </div>


  </li>
 <!-- cards in the stream of deal -->
</ul>


  </div>

  </div>

CSS

#deal-zone {
  margin-top: 20px;  
}
#deal-zone ul {
    padding: 0;
  }
.cards-list {
  list-style: none;
  display: block;
  height: auto;
}
.card {
    width: 47%;
    display: inline-block;
    margin: 0 1% 21px 1%;//sum 49%
}
.card-content {
  background: #fff;
  position: relative;
}
.card-image {
  vertical-align: top;
  position: relative;
  line-height: 0;
  overflow: hidden;
  padding-bottom: 33.88%;

}
.card-image img {
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    color: red; 
  }

.container .jumbotron {
  padding-left: 0px;
  padding-right: 0px;
}

.card-short-info {
  width: 100%;
  height: 13%;
  position: absolute; 
  color: #464650;
  padding: 0px 1em;
  font-size: 0.8em;
  background-color: grey;
  bottom:0; 
  display: none;    
}
.moreInfo {
  position: relative;
  top: 50%;
  -webkit-transform: translateY(-50%);
  -ms-transform: translateY(-50%);
  transform: translateY(-50%);
  float: right; 
  font-size: 16px;
  line-height: normal;
  color: #464650;
}
.short-info-content {
  position:relative;
  top: 50%;
  -webkit-transform: translateY(-50%);
  -ms-transform: translateY(-50%);
  transform: translateY(-50%);
  text-align: left;  
}
.card-short-info a.dateSales {
  color: #464650;
}

Javascript

$(".card-image").hoverIntent({
            sensitivity:100,//sensitivity threshold (must be 1 or higher)    
            interval:100,//milliseconds for onMouseOver polling interval    
            timeout:100,//milliseconds delay before onMouseOut    
            over:function(){
              $('.card-short-info',this).slideToggle(100);
            },
            out:function(){
              $('.card-short-info',this).slideToggle(300);

            }
        });

Answer 1

这个更新的 fiddle 有帮助吗？

https://jsfiddle.net/4dhkbg6j/1/

我为关闭按钮创建了这个 CSS 叠加层和一个类:

  #info-overlay {
  display:none;
  z-index:999;
  position:absolute;
  height:100%;
  width:100%;
  background-color:grey;
}

.close-overlay {
  float:right;
  padding:5px;
}

在 card-content 下，我为叠加层添加了 div

 <div class="card-content">        
   <div id="info-overlay">
     <div class="close-overlay">
       <a>close</a>
     </div>
     some info some longer info and this is really long now i wonder how long it can get    
   </div>...

最后是一些简单的 jQuery 来显示和隐藏叠加层。

$(".close-overlay").click(function(){
  $("#info-overlay").hide();
});

$("#plusbutton").click(function(){
  $("#info-overlay").show();
});

现在这可以通过混合元素的类和 ID 来清理，因为我相信您有不止一个。您还可以添加一些花哨的动画，但希望这能让您朝着正确的方向开始。