jquery - 如何滑动一个div来填充另一个div？

Question

我想制作一个以背景图片上的标题开头的新闻框，但是当用户将鼠标悬停在它上面时，新闻标题和描述会填充背景图片，就像新闻 block 一样 here .

这是我一起破解的:

$(document).ready(function() {
  $('.thumb-box').hover(function() {
    $(this).find('.news-item').removeClass('only-title')
    $(this).find('.news-item').addClass('title-and-desc');
    $(this).find('.desc-on-image').removeClass('hidden');
  }, function() {
    $(this).find('.news-item').removeClass('title-and-desc');
    $(this).find('.news-item').addClass('only-title');
    $(this).find('.desc-on-image').addClass('hidden');
  });
});

.image-container {
  position: relative;
  text-align: center;
  color: white;
}

.thumb-box {
  width: 300px;
  height: 240px;
  background-size: cover;
  background-repeat: no-repeat;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  margin-bottom: 20px;
}

.only-title {
  color: black;
  background: rgba(255, 255, 255, .9);
  margin: 0;
  padding: 1em 1em 1em 1em;
  cursor: pointer;
}

.title-and-desc {
  color: black;
  background: rgba(255, 255, 255, .9);
  margin: 0;
  padding: 1em 1em 1em 1em;
  cursor: pointer;
  animation-name: draw-up;
  animation-duration: 1s;
}

@keyframes draw-up {
  from {
    padding: 1em 1em 1em 1em;
  }
  to {
    padding: 1em 1em 8em 1em;
  }
}

.clickable {
  cursor: pointer;
}

.news-title {
  color: black;
}

.news-title a {
  color: black;
}

.news-title a:hover {
  color: black;
  text-decoration: none;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="thumb-box img-responsive" style="background-image: url(/path/to/photo">
  <div class="news-item only-title">
    <a class="news-title" href="/article/{{$a.Slug}}">
      <h4><strong> {{$a.Title}} </strong> </h4>
      <div class="desc-on-image hidden">
        {{$a.Teaser}} ...
      </div>
    </a>
  </div>
</div>

问题有两个:

1. 有点紧张。当鼠标从某些 Angular 进入时，盒子会跳动一点。

2. 叠加的div一上滑就往下跳

我想知道如何解决这些问题，或者如何拥有更强大的解决方案来执行相同的功能？

Answer 1

Relative positioning , overflow: hidden , Absolute Positioning 和 transition

这可以在不使用 javascript 或 Jquery 的情况下实现。

外部 div container 被赋予 position: relative 和 overflow: hidden .

所以，无论什么东西在 container 里面，并且比 container 有更多的宽度或更多的高度，或者可能相对地放在 container 外面，那么它溢出容器并保持隐藏。

现在，我们使用 position: absolute 将 slider 绝对放置在距离 top 一定距离的地方，即 100px。所以，现在它溢出了它的父 div container。但它是隐藏的，因为 overflow: hidden 在其父 div container 上。

现在，使用 css child combinator ，每当父 div container 悬停时，我们使用 transition 向上滑动 slider .

.container{
  position:relative;
  background-image:url(https://picsum.photos/400);
  height:200px;
  width:300px;
  cursor:pointer;
  overflow:hidden;
}
.slider{
  position:absolute;
  top:100px;
  width:100%;
  height:200px;
  background:rgba(255,255,255,0.7);
  transition: top 1s;
}
.container:hover > .slider{
  top:0;
}

<div class='container'>
  <div class='slider'>
    <h1>I will Slide</h1>
    <p>My content</p>
    <p>My content</p>
    <p>My content</p>
  </div>
</div>