jquery JS addClass 和 淡入/淡出 一起 使用 ?

cld4siwp  于 2022-11-22  发布在  jQuery
关注(0)|答案(1)|浏览(136)

是否 可以 将 addClass 和 fadeIn 与 JS 结合 在 一起 ?
我 并 没有 真正 练习 JS , 但 我 正在 尝试 开发 一 个 脚本 , 在 文本 悬停 时 , div 容器 会 改变 背景 淡入/淡出 。
我 做 了 一 个 代码 笔 来 更 好 地 显示 我 正在 努力 实现 的 目标 。 当 你 悬停 在 一 个 标题 上 时 , 背景 会 出现 , 但 没有 任何 过渡 。
https://codepen.io/Freddan3/pen/NWzpKRz 的 最 大 值
第 一 个
是否 可以 将 淡入 添加 到 您 悬停 的 当前 项目 , 并 淡出 另 一 个 项目 ?
提前 感谢 任何 建议 : - )

t98cgbkg

t98cgbkg1#

你可以在你的#BG周围使用第二个div,并给予两个不同的background-image
第一个
然后,您可以在悬停时设置#BGopacity的动画:

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

为了防止内容(#1st#2nd)也淡出,您可以使用绝对位置将其 Package 在额外的div中:
第一个

工作示例:

第一个

相关问题