JS addClass 和fadeIn/fadeOut 在一起？

【问题标题】：JS addClass and fadeIn/fadeOut together?JS addClass 和fadeIn/fadeOut 在一起？
【发布时间】：2022-11-10 23:19:09
【问题描述】：

是否可以将addClass和fadeIn与JS结合在一起？

我并没有真正练习过 JS，但我正在尝试开发一个脚本，在文本悬停时，div 容器会更改背景淡入/淡出。

我制作了一个 CodePen 来更好地展示我想要实现的目标。当您悬停标题时，背景会出现，但没有任何类型的过渡。

https://codepen.io/Freddan3/pen/NWzpKRz

$(document).ready(function () {
    $('#1st').hover(function () {
        $('#BG').addClass('first');
        $('#BG').removeClass('second');
    });
    $('#2nd').hover(function () {
        $('#BG').addClass('second');
        $('#BG').removeClass('first');
    });
});

是否可以将淡入淡出添加到您悬停的当前项目并淡出另一个？

提前感谢您的任何建议:-)

【问题讨论】：

标签： javascript jquery css animation

【解决方案1】：

你可以在你的#BG 周围使用第二个div 并提供不同的背景颜色或图像。然后，您将在悬停时为#BG 的opacity 设置动画。为了防止内容（#1st 和 #2nd）也消失，您可以将其包装在一个额外的 div 中，并使用绝对位置：

简单的工作示例：（与background-color）

$(document).ready(function () {
    $('#1st').hover(function () {
        $('#BG').animate({opacity: 0}, 1000);
    });
    $('#2nd').hover(function () {
        $('#BG').animate({opacity: 1}, 1000);
    });
});

#container {
  background-color: red;
}

#BG {
  height: 100px;
  background-color: green;
}

#content {
  position: absolute;
  top: 0;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<div id="container">
  <div id="BG"></div>
  
  <div id="content">
    <h2 id="1st">First</h2>
    <h2 id="2nd">Second</h2>
  </div>
</div>

【讨论】：