JSaddClass和fadeIn/fadeOut一起？-有解無憂

是否可以將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');
    });
});

section{
  min-height: 500px;
  text-align: center;
}

.title{
  margin: 50px auto;
  font-size: 5em;
  font-weight: 400;
}

.first {
    background: url(https://cdn.pixabay.com/photo/2022/11/03/15/24/coffee-7567749_960_720.jpg);
    background-size: cover;
}

.second {
    background-image: url(https://cdn.pixabay.com/photo/2022/10/25/13/28/hanoi-7545860_960_720.jpg);
    background-size: cover;
}

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

<section id="BG">
  <div id="1st" class="title">TITLE</div>
  <div id="2nd" class="title">TITLE 2</div>
</section>

是否可以將淡入淡出添加到您懸停的當前專案并淡出另一個？

提前感謝您的任何建議:-)

uj5u.com熱心網友回復：

您可以使用第二個div環繞您的#BG并給出兩個不同background-image的 s：

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

#container {
  background-image: url(https://cdn.pixabay.com/photo/2022/11/03/15/24/coffee-7567749_960_720.jpg);
}

#BG {
  background-image: url(https://cdn.pixabay.com/photo/2022/10/25/13/28/hanoi-7545860_960_720.jpg);
}

然后你會在懸停時為opacityof設定影片：#BG

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

為了防止內容 (#1st和#2nd) 也消失，您可以div使用絕對位置將其包裝在額外的內容中：

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

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

作業示例：

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

#container {
  background-image: url(https://cdn.pixabay.com/photo/2022/11/03/15/24/coffee-7567749_960_720.jpg);
}

#BG {
  height: 100px;
  background-image: url(https://cdn.pixabay.com/photo/2022/10/25/13/28/hanoi-7545860_960_720.jpg);
}

#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>

轉載請註明出處，本文鏈接：https://www.uj5u.com/caozuo/532874.html

標籤：javascriptjQuerycss动画

上一篇：FramerMotion-映射元素中的不同影片

下一篇：如何使用JS/jQuery.animate({影片元素從Last到First/ReverseAnimation的函式