元素一直延迟和滑动

Question

我正在尝试创建一个作品集，当鼠标悬停在图像上时，标题会滑入视图。当我将鼠标悬停在图像上时，它需要很长时间才能滑入视图，而当它滑入视图时，它会一直滑动直到鼠标离开图像。以下是使用的代码片段：

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

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

使 a 标签相对于 figcaption 的位置在正确的位置。
在您的 JS 代码中使用 a 元素触发 hover 事件，然后切换 figcaption相对于该元素。

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

元素一直延迟和滑动

Element keeps delaying and sliding

html

css

jquery

slidetoggle