Element keeps delaying and sliding

Question

I am trying to create a portfolio where when an image is hovered on, the caption slides into view. When I hover on the image it takes a significant time to slide into view and when it does it keeps sliding until the mouse leaves the image. Here are snippets of the code used:

$(document).ready(function() {
    $("figcaption").hide();
    $("figure").hover(sUp, sDn);
  })

function sUp() {
  $("figcaption").slideUp();
}

function sDn() {
  $("figcaption").slideDown(500);
}

.wrkitem {
  padding: 0;
}
.wrkitem a {
  display: block;
  text-align: center;
}
img {
  display: block;
  position: relative;
  overflow: hidden;
}
figcaption {
  width: 100%;
  height: 100%;
  position: absolute;
  background: rgba(0, 0, 0, 0.75);
  color: white;
  padding: 10px 20px;
  bottom: 0;
}
.imgwrap {
  border: 10px solid rgba(49, 49, 49, 0.71);
  overflow: hidden;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="imgwrap">
  <div class="col-md-4 col-sm-6 col-xs-6 wrkitem">
    <a href="">
      <figure>
        <img class="img-responsive" src="http://lorempixel.com/380/260" alt="">
      </figure>
      <figcaption class="cap-top">Lorem ipsum dolor sit amet</figcaption>
    </a>
  </div>
  <div class="col-md-4 col-sm-6 col-xs-6 wrkitem">
    <a href="">
      <figure>
        <img class="img-responsive" src="http://lorempixel.com/380/260" alt="">
      </figure>
      <figcaption class="cap-top">Lorem ipsum dolor sit amet</figcaption>
    </a>
  </div>
  <div class="col-md-4 col-sm-6 col-xs-6 wrkitem">
    <a href="">
      <figure>
        <img class="img-responsive" src="http://lorempixel.com/380/260" alt="">
      </figure>
      <figcaption class="cap-top">Lorem ipsum dolor sit amet</figcaption>
    </a>
  </div>
</div>

Answer 1

Althought you can do this with pure CSS, I want to point with your code how can you solve it:

1. Make the a tag relative to position it's figcaption on the right place.

2. On your JS code use the a element to trigger the hover event, then toggle the figcaption relative to that element.

$(document).ready(function() {
  $("figcaption").hide();
  $(".imgwrap a").hover(function(){
    $('figcaption',this).stop().slideToggle()
  });
})

.wrkitem {
  padding: 0;
}
.wrkitem a {
  display: block;
  text-align: center;
  position:relative;
}
img {
  display: block;
  position: relative;
  overflow: hidden;
}
figcaption {
  width: 100%;
  height: 100%;
  position: absolute;
  background: rgba(0, 0, 0, 0.75);
  color: white;
  padding: 10px 20px;
  bottom: 0;
}
.imgwrap {
  border: 10px solid rgba(49, 49, 49, 0.71);
  overflow: hidden;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="imgwrap">
  <div class="col-md-4 col-sm-6 col-xs-6 wrkitem">
    <a href="">
      <figure>
        <img class="img-responsive" src="http://lorempixel.com/380/260" alt="">
      </figure>
      <figcaption class="cap-top">Lorem ipsum dolor sit amet</figcaption>
    </a>
  </div>
  <div class="col-md-4 col-sm-6 col-xs-6 wrkitem">
    <a href="">
      <figure>
        <img class="img-responsive" src="http://lorempixel.com/380/260" alt="">
      </figure>
      <figcaption class="cap-top">Lorem ipsum dolor sit amet</figcaption>
    </a>
  </div>
  <div class="col-md-4 col-sm-6 col-xs-6 wrkitem">
    <a href="">
      <figure>
        <img class="img-responsive" src="http://lorempixel.com/380/260" alt="">
      </figure>
      <figcaption class="cap-top">Lorem ipsum dolor sit amet</figcaption>
    </a>
  </div>
</div>