jquery - 在鼠标悬停时向上滑动一个 div 并显示联系人按钮

Question

我正在尝试构建此功能:

http://www.liveyourdream.org/take-action/index.html

因此，当将鼠标悬停在框上时，当框向上滑动时，联系人按钮会显示在框下方。我尝试了 mouseenter 和 mouseleave 方法，它有点管用，但并不完全符合我的要求。当然，在 mouseleave 上，框会向下滑动，但我希望框保持向上，以便用户可以单击“联系”按钮。

<div class="container top">
<div class="row">
    <div class="col-sm-6">
      <div class="card card-block">
        <h4 class="card-title">Opportunity title</h4>
        <p class="card-text">Opportunity description, lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus eget magna consectetur, ultrices sem ac, ultricies dolor. Vivamus eget venenatis nulla. Nunc vitae purus mi. Fusce sed iaculis massa.</p>
        <p class="card-text"><small class="text-muted">Last updated 3 mins ago</small></p>
      </div>          
    </div>
    <a class="btn" href="#">Contact</a>
    <div class="col-sm-6"></div>
</div>
</div>

和:

$('.card-block').mouseenter(function() {
   $('.card-block').animate({top: -20}, 5);
});
$('.card-block').mouseleave(function() {
   $('.card-block').animate({top: 20}, 5);
});

这是我到目前为止所做的https://jsfiddle.net/eykg89js/

联系人按钮应该位于卡片的底部。我也在使用 Bootstrap 。有什么想法吗？

Answer 1

而不是过渡 margin transition transform: translateY() 代替，这样元素仍然会占据页面上它在 translateY 之前所做的空间() 变换。给卡片一个背景颜色，这样你就看不到下面隐藏的内容。不需要在隐藏的 p 上使用 z-index，只需将它移到 HTML 中的卡片之前即可。移除 p 上的默认 margin，并使用 15px 的 left 和 right 值> 从 bootstrap 的 col 类填充中偏移填充。

.top {margin-top: 60px;}
.card-block {transition: 0.5s ease; background: white;}
.card-container:hover .card-block { cursor: pointer; transform: translateY(-30px); }
.info {
  position:absolute;
  bottom:0;
  left:15px;
  right: 15px;
  margin: 0;
}

<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-alpha.6/js/bootstrap.min.js"></script>
<div class="container top">
    <div class="row">
        <div class="col-sm-6 card-container">
          <p class="info">More info here</p>
          <div class="card card-block">
            <h4 class="card-title">Opportunity title</h4>
            <p class="card-text">Opportunity description, lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus eget magna consectetur, ultrices sem ac, ultricies dolor. Vivamus eget venenatis nulla. Nunc vitae purus mi. Fusce sed iaculis massa.</p>
            <p class="card-text"><small class="text-muted">Last updated 3 mins ago</small></p>
          </div>
          
        </div>
        <div class="col-sm-6"></div>
    </div>
</div>