jquery - 悬停时平滑叠加

Question

当我将光标放在图像上时，我试图制作平滑的效果叠加，但我不知道我做错了什么......叠加出现得如此之快 我不知道我的问题是出在 JS 还是 CSS

这是我的jsfiddle

CSS 侧:

-webkit-transition: all 0.5s ease;
-moz-transition: all 0.5s ease;
-o-transition: all 0.5s ease;
transition: all 0.5s ease;

JS端:

    $('.video-cover').after().stop(true, true).addClass('video-cover-hover', 1000);

https://jsfiddle.net/fkd0ewev/9/

Answer 1

要使 transition 属性发挥作用，在对该元素进行任何修改之前，它需要存在于该元素上。您的逻辑不起作用，因为您正在使用附加到 .video-cover 的类添加 transition 规则。

要解决此问题，请修改 CSS，以便在页面加载时出现 .video-cover:after，然后您可以使用 .video-cover-hover类来更改其背景颜色，如下所示:

$(document).ready(function() {
  $('.video').hover(function() {
    $('.video-cover').addClass('video-cover-hover');
    $(this).find('.video-cover').removeClass('video-cover-hover');
  }, function() {
    $('.video-cover').removeClass('video-cover-hover');
  });
});

.video {
  background-color: #EFEFEF;
  width: 196px;
  height: 290px;
  float: left;
  position: relative;
  overflow: hidden;
  color: white;
  margin-right: 10px
}

.video-cover:after {
  content: '';
  transition: all 0.5s ease;
  position: absolute;
  height: 100%;
  top: 0;
  left: 0;
  right: 0;
  z-index: 10;
  background-color: transparent;
}

.video-cover.video-cover-hover:after {
  background-color: rgba(0, 0, 0, 0.3);
}

.video-cover img {
  position: absolute;
  left: 50%;
  top: 50%;
  height: 100%;
  width: auto;
  transform: translate(-50%, -50%);
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<div class="bloc-liste-video">
  <div class="liste-video">
    <div class="video" id="video-1">
      <div class="video-cover">
        <img src="https://placeimg.com/225/290/any">
      </div>
      <div class="timeago">4 days ago</div>
    </div>
    <div class="video" id="video-2">
      <div class="video-cover">
        <img src="https://placeimg.com/225/290/any">
      </div>
      <div class="timeago">4 days ago</div>
    </div>
    <div class="video" id="video-3">
      <div class="video-cover">
        <img src="https://placeimg.com/225/290/any">
      </div>
      <div class="timeago">4 days ago</div>
    </div>
    <div class="video" id="video-4">
      <div class="video-cover">
        <img src="https://placeimg.com/225/290/any">
      </div>
      <div class="timeago">4 days ago</div>
    </div>
  </div>
</div>