jQuery - 隐藏的类没有用淡入淡出显示答案

【问题标题】：jQuery - hidden class is not being displayed with fadeInjQuery - 隐藏的类没有用淡入淡出显示
【发布时间】：2022-01-14 23:36:19
【问题描述】：

我有一个隐藏类fadeThis，当我将鼠标悬停在按钮上时它不会出现。也许它与另一个类/div发生冲突？

我实际上要做的是在灰色框上创建一个红色淡入淡出，当光标悬停在按钮上时，然后当光标离开框（而不是按钮）时，我希望它返回恢复原状。

我还添加了 CSS 来帮助演示

HTML

    <div class="imageOne">

        <div class="onClickThis"> <!-- hidden by default-->
            <h2 class="fadeThis">Whatever the text needs to be</h2> <!-- hidden by default-->
        </div>
        <div class="centerButton">
            <button class="btn">View More</button>
        </div>
    </div>

CSS

.imageOne{
    height: 300px;
    width: 400px;
    background-color: grey;
}

.centerButton{
    display: flex;
    justify-content:center;
    padding-top:150px;
}

.btn{
    height: 30px;
    width:170px;

}

.onClickThis{
    height: 300px;
    width: 400px;
    background-color: tomato;

}

JavaScript

$(document).ready(function () {
    $(".onClickThis").hide();
    $(".fadeThis").hide();
    $(".btn").hover(function () {
        $(".imageOne").fadeIn("slow", function () {
            $(this).addClass("fadeThis onClickThis");
            $(".btn").remove();
        });
        $(".onClickThis").mouseleave(function () {
            $(this).removeClass("fadeThis onClickThis");

        });
    });

});

【问题讨论】：

为什么最后有两个关闭的div？你知道吗？
您正在删除 .btn 并再次尝试在已删除的元素上添加 mouseleave 事件侦听器？
请阅读minimal reproducible example并添加完整的sn-p（edit并单击[<>]），包括相关的css。
.imageOne fadeIn - 没有意义，因为 btn 视图更多位于 .imageOne 内部，因此 imageOne 必须已经可见。除非您提供的 html 不符合您的要求，否则请确保符合要求。
感谢大家的帮助。我会尝试你的建议，看看我会怎么做。我还添加了更多细节和代码来帮助解释我想要实现的目标。

标签： javascript html jquery

【解决方案1】：

我不明白你在寻找什么。也许您可以提供更多详细信息。

这是一个从您的代码开始的演示，添加了一些更改。

$(document).ready(function () {
    $(".onClickThis, .fadeThis").hide();
  
    $(".btn").hover(function () {
        $(".imageOne").fadeIn("slow", function () {
           $(".onClickThis, .fadeThis").fadeIn( 250 );
           $(".btn").fadeOut();
        });
    });
});

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Document</title>
</head>
<body>
  
<div class="imageOne">
  <div class="onClickThis"> <!-- hidden by default-->
      <h2 class="fadeThis">Whatever the text needs to be</h2> <!-- hidden by default-->
  </div>
  <div class="centerButton">
      <button class="btn">View More</button>
  </div>
</div>

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

【讨论】：