jquery - 同时使用显示 : none and display:flex;

Question

我有一个 div，当您将鼠标悬停在它上面时，它的一个子元素 - 另一个 div - 应该使用 JQuery 淡入淡出。要获得更好的想法，您可以查看以下内容 codepen .

HTML:

<div id="container">

  <div class="item">
    <img src="https://placehold.it/375x250">
    <div class="description">
      <h3>Description</h3>
    </div>
  </div>

</div>

CSS:

#container {
  width: 100%;
  height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
}

#container .item {
  width: 375px;
  height: 250px;
  position: relative;
}

#container .item img {
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
}

#container .item .description {
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  background: rgba(0, 0, 0, 0.8);
  color: #fff;
  display: none;
  display: flex;
  justify-content: center;
  align-items: center;
  font-family: sans-serif;
}

JQuery:

$(function () {

  $('.item').hover(
    function () {
      // mouse over
      $('.description').fadeIn(1000);
    },
    function () {
      // mouse out
      $('.description').fadeOut(1000);
    }
  );

});

在 CSS > .description 部分，我同时使用了 display: none(JQuery 要求这样 div 最初是隐藏的)和 display: flex(用于很好地居中内容)。但是当两者结合时，最后一个 display 属性被读取并且 display: none 被忽略。我该如何使它发挥作用？

Answer 1

首先，您要从 CSS 中删除 display: flex，因为它是正在使用的(因为它会覆盖之前的 display: none)

然后在您的 JS 中，将 fadeIn 替换为以下 css 和 animate 的组合以实现效果。

$(function() {
    $('.item').hover(
        function() {
            $('.description').css({opacity: 0, display: 'flex'}).animate({
                opacity: 1
            }, 1000);
        },
        function() {
            $('.description').fadeOut(1000);
        });
}); 

这里的css函数是在每个效果之前使用的，设置opacity: 0和display: flex之后会动画 不透明度:1

然后在 fadeOut 上没有什么特别应该发生的，因为它只会淡入 display: none