jQuery - 隐藏的类没有用淡入淡出显示
Posted
技术标签:
【中文标题】jQuery - 隐藏的类没有用淡入淡出显示【英文标题】：jQuery - hidden class is not being displayed with fadeIn 【发布时间】：2022-01-14 23:36:19 【问题描述】：我有一个隐藏类fadeThis，当我将鼠标悬停在按钮上时它不会出现。
也许它与另一个类/div发生冲突？
我实际上要做的是在灰色框上创建一个红色淡入淡出，当光标悬停在按钮上时，然后当光标离开框（而不是按钮）时，我希望它返回恢复原状。
我还添加了 CSS 来帮助演示
<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;
$(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 不符合您的要求，否则请确保符合要求。
感谢大家的帮助。我会尝试你的建议，看看我会怎么做。我还添加了更多细节和代码来帮助解释我想要实现的目标。
【参考方案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>【讨论】：
以上是关于jQuery - 隐藏的类没有用淡入淡出显示的主要内容，如果未能解决你的问题，请参考以下文章