addClass和fadeIn/fadeOut在一起？
addClass和fadeIn/fadeOut在一起？
提问于 2022-11-10 02:13:09
在JS中可以将addClass和fadeIn结合在一起吗？我正在尝试开发一个脚本，在文本悬停(标题)上，div容器会改变背景渐入/退出(整个部分)。
$(document).ready(function () {
$('#1st').hover(function () {
$('#BG').addClass('first');
$('#BG').removeClass('second');
});
$('#2nd').hover(function () {
$('#BG').addClass('second');
$('#BG').removeClass('first');
});
});我试着增加褪色的效果，但没有成功。
$(document).ready(function () {
$('#1st').hover(function () {
$('#BG').stop(true, true).addClass('first', 400);
$('#BG').stop(true, true).removeClass('second', 400);
});
$('#2nd').hover(function () {
$('#BG').stop(true, true).addClass('second', 400);
$('#BG').stop(true, true).removeClass('first', 400);
});
});有没有办法让他们一起工作？
谢谢您的任何建议:-)
回答 2
Stack Overflow用户
发布于 2022-11-10 02:24:51
如下所示，您可以在fadeIn/fadeout之前/之后添加/删除类。
$(document).ready(function(){
$("#1st").hover(function(){
$("#BG").fadeOut(400,function(){
alert("fadeOut() done！");
});
});
$("#2nd").hover(function(){
$("#BG").fadeIn(400,function(){
alert("fadeIn() done！");
});
});
});
Stack Overflow用户
发布于 2022-11-10 02:56:16
谢谢你的回答@何聊生
我制作了一个CodePen来更好地展示我想要做的事情。当您悬停一个标题，背景会出现，但没有任何形式的转换。
是否可以将fadeIn添加到正在悬停的当前项中，并将另一项添加到fadeOut中？
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');
});
});section{
width: 100%;
height: 100%;
min-height: 500px;
text-align: center; }
.title{
margin: 50px auto;
font-size: 5em;
font-weight: 400; }
.first {
width: 100%;
height: 100%;
background: url(https://cdn.pixabay.com/photo/2022/11/03/15/24/coffee-7567749_960_720.jpg);
background-repeat: no-repeat;
background-attachment: relative;
-webkit-background-size: cover;
-moz-background-size: cover;
-ms-background-size: cover;
-o-background-size: cover;
background-size: cover;
background-position: center center;
position: relative; }
.second {
width: 100%;
height: 100%;
background-image: url(https://cdn.pixabay.com/photo/2022/10/25/13/28/hanoi-7545860_960_720.jpg);
background-repeat: no-repeat;
background-attachment: relative;
-webkit-background-size: cover;
-moz-background-size: cover;
-ms-background-size: cover;
-o-background-size: cover;
background-size: cover;
background-position: center center;
position: relative; }<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>
<section id="BG">
<div id="1st" class="title">TITLE</div>
<div id="2nd" class="title">TITLE 2</div>
</section>
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/74383426
复制相关文章
相似问题
腾讯云开发者
