元素保持延迟和滑动

Question

我正在尝试创建一个投资组合，当图像悬停时，标题会滑入视图。当我将鼠标悬停在图像上时，需要花费大量时间才能滑入视图，当它停留时，它会一直滑动直到鼠标离开图像。以下是所用代码的片段：

＆＃13;

＆＃13;

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

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

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

＆＃13;

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

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

Answer 1

虽然你可以用纯CSS做到这一点，我想用你的代码指出你如何解决它：

1. 将a代码设置为相对于位置figcaption位于正确位置。

2. 在您的JS代码中，使用a元素触发hover事件，然后切换相对于该元素的figcaption。

＆＃13;
＆＃13;
$(document).ready(function() {
  $("figcaption").hide();
  $(".imgwrap a").hover(function(){
    $('figcaption',this).stop().slideToggle()
  });
})
＆＃13;
.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;
}
＆＃13;
<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>
＆＃13;
＆＃13;
＆＃13;