jqueryまたはcss遷移プロパティ-jquery、css、背景画像、遷移、フェードを使用して、リンクのホバー時に1つの背景画像を別の背景画像にフェードします。

タイトルは少し紛らわしいかもしれません。

私が持っています .main-container ページコンテンツ全体を保持するdiv。

リンクにカーソルを合わせる #cheffing 私は変更する必要があります .main-containerの背景画像をある画像から別の画像に移し、2つの画像間でフェードします。

問題は、フェード中にコンテンツを中に入れたいということです .main-container 引き続き表示するには、コンテナ全体ではなく、背景画像のみを有効にします。

これに取り組む方法すらわかりません。jQueryだけを使用する必要がありますか？CSS？ classToggle()？ fadeOut()？よく分かりません...

私はjQueryを使用しています。これが意味をなさない場合は申し訳ありません。もっと必要な場合は私が周りにいます。

コードペン

https://codepen.io/JDSWebService/pen/NjmrRv

HTML

<div class=".main-container">
Other Misc Page Content
<a href="#" id="cheffing">Cheffing</a>
Other Misc Page Content
</div>

CSS

.main-container {
height: 100vh;
background: url("../imgs/background.jpg");
background-size: cover;
background-position: 0 0;
background-repeat: no-repeat;
transition: background 1s ease-out;
}

回答：

回答№1は1

背景をアニメーション化することはできません。

ここは 簡単な例.

だから、画像を配置する 素子 あなたが背景を持ちたい要素内で absolute 低い z-index 残りのコンテンツの背後にそれをもたらします。

次に、 .hover() 2つの画像のURLを切り替えることができます。

---

EDIT
がここにあります 2番目の例 1つの画像で2つのURLの代わりに2つの画像を使用する（ 間にある白）。

HTML：

<div class=".main-container">
<img id="background-1" src="/images/firstImage.jpg">
<img id="background-2" src="secondImage.jpg">
content...

CSS：

.main-container {
height: 100vh;
background-size: cover;
background-position: 0 0;
background-repeat: no-repeat;
transition: background 1s ease-out;
}
#background-1,#background-2{
position:absolute;
z-index:-1;
width:100%;
height:500px;
}
#background-2{
display:none;
}

jQuery：

var fadeOptions = {
duration:600,
easing:"linear"
};

$("#cheffing").hover(function(){
$("#background-1").fadeOut(fadeOptions);
$("#background-2").fadeIn(fadeOptions);
},
function(){
$("#background-2").fadeOut(fadeOptions);
$("#background-1").fadeIn(fadeOptions);
});

---