クラスフェードの追加と削除が機能しない - javascript、jquery、html、css、fade

私は開発に慣れていないので、私に簡単に行ってください:)

私は自分のeコマースプラットフォームでボディ背景スライダーを作成し始めました。最終的には、ボディ背景画像の選択を切り替えることができます（まだ作成されていません）。

クラスを削除および追加することにより、「前」および「次」ボタンを使用して本文の背景画像を切り替えるページを作成できましたが、クロスフェードは機能しません。以下を参照してください。

https://zoeyplayground-com.zoeysite.com/lookbook

ここに私のコードです：

HTML

<script>
jQuery(document).ready(function() {
jQuery(".next").click(function() {
jQuery("body").removeClass("bodybackground1").fadeOut("slow");
jQuery("body").addClass("bodybackground2").fadeIn("slow");
});
});
</script>

<script>
jQuery(document).ready(function() {
jQuery(".back").click(function() {
jQuery("body").removeClass("bodybackground2").fadeOut("slow");
jQuery("body").addClass("bodybackground1").fadeIn("slow");
});
});
</script>

<div id="toggle" width="100%">
<img src="/images//media/import/back.png" class="back">
<img src="/images//media/import/next.png" class="next">
</div>

CSS

.bodybackground1 {
background: url("/media/import/background1.jpg") no-repeat center center fixed;
background-size: cover;
overflow: hidden;
transition: all 0.5s;
}

.bodybackground2 {
background: url("/media/import/background2.jpg") no-repeat center center fixed;
background-size: cover;
overflow: hidden;
transition: all 0.5s;
}

#toggle img {
margin-top: 400px;
display: inline;
}

#toggle .next {
float: right;
}

#toggle img:hover {
cursor: pointer;
opacity: 0.8;
}

フェードが機能しない理由を説明できる人はいますか？ガイダンスやアドバイスをいただければ幸いです。ありがとうございます。

回答：

あなたはもうすぐそこにいます。 transition: all 0.5s; あなたの .bodybackground* クラスはフェード効果を処理する必要があります。問題は1つだけです。これにより、遷移プロパティが上書きされます。 #pix-fe コード。

#pix-fe {
...
transition: opacity .2s ease;
...
}

確認してください。簡単な修正方法は、CSSで次のことを行うことです。

#pix-fe.bodybackground1 {
background: url("/media/import/background1.jpg") no-repeat center center fixed;
background-size: cover;
overflow: hidden;
transition: all 0.5s;
}

#pix-fe.bodybackground2 {
background: url("/media/import/background2.jpg") no-repeat center center fixed;
background-size: cover;
overflow: hidden;
transition: all 0.5s;
}