Marz Marz -4 years ago 136
jQuery Question

Slide up a div on hover over and show the Contact button

I am trying to build this functionality:

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

So when a box is hovered over, the contact button show under the box as the box is sliding up. I tried mouseenter and mouseleave methods, it kinda works but not exactly as how I want. Of course on mouseleave the box slides back down, but I want the box to stay up so the user can click the Contact button.

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


and:

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


Here's what I've done so far https://jsfiddle.net/eykg89js/

The Contact button should be at the bottom of the Card. I am also using Bootstrap. Any thoughts?

Answer Source

Instead of transitioning margin transition transform: translateY() instead, so that the element will still occupy the space on the page that it did pre-translateY() transform. Give the card a background color so that you can't see the hidden content underneath. No need for a z-index on the hidden p, just move it before the card in your HTML. Remove the default margin on the p, and use left and right values of 15px to offset the padding from bootstrap's col class padding.

.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>

Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download