JQueryのクロスフェードについて詳しい方ご指導お願い致します。

前提・実現したいこと

JjQueryで画像のクロスフェードを作っていますが、正常に動くようにしたい。
リロードあるいは、別ページからHOMEに戻っても画像のちらつきなく。
詳しい方ご指導いただければ幸いです。

発生している問題・エラーメッセージ

JjQueryで画像のクロスフェードを作っていますが、フェードは問題ないのですが、ページをリロードあるいは、別ページからHOMEに戻る際、一瞬画像が順番に表示されて（ちらつき？）、フェードが始まるという感じになってしまいます。
おそらくバグ？かと思いますが、原因がわからず困っています。

該当のソースコード

●HTML

●CSS
.main_img {
width: 100%;
padding-top: 90px;
height: 400px;
}
#imageSlide {
width: 100%;
object-position: 50% 70%;
object-fit: cover;
display: block;
position: relative;
margin: 0;
padding: 0;
}

#imageSlide li img {
width: 100%;
height: 400px;
object-position: 50% 60%;
object-fit: cover;
display: block;
position: absolute;
}
.text p {
position: absolute;
margin-top: 200px;
left: 50%;
font-size: 60px;
color: #fff;
filter: drop-shadow(3px 3px 10px #666);
}
.text p > span {
display: inline-block;
transform: scale(0);
}

●Js
// メイン画像フェード
function photoFade() {
jQuery('#imageSlide li:first').clone(true).appendTo('#imageSlide');
jQuery('#imageSlide li:last').css({ opacity:'0'})
jQuery('#imageSlide li:last').animate({ opacity:'1' },{ duration:1500, complete:function(){
jQuery('#imageSlide li:first').remove()
}
});
}

setInterval(function(){
photoFade();
}, 4000);

試したこと

JSが原因かと思い、色々なコードを試してみましたが、根本的に解決できず。

補足情報（FW/ツールのバージョンなど）

どのブラウザでも同じような現象が起こってます。
情報が足りないようであれば、追加します。

yambejp

2019/12/09 00:36

全角のダブルクォーテを使っている箇所があります、半角に直してください

行動規範の内容に同意します

回答1件

ベストアンサー

リロードした時に発生する内容だと、ちょっと再現が難しかったので、代替案のご提案です。

一瞬画像が順番に表示されて（ちらつき？）

とのことなので、ページのロードの際には、#imageSlide要素を非表示ないし透明にしておき、
読み込み完了後に、フェードで出すなどはいかがですか？

または、#imageSlide要素の真上に何かかぶせちゃうとか

javascript
1function photoFade() {
2  $('#imageSlide li:first').clone(true).appendTo('#imageSlide');
3  $('#imageSlide li:last')
4    .css({ opacity: 0 })
5    .animate({ opacity: 1 }, {
6      duration: 1500,
7      complete: function() {
8        $('#imageSlide li:first').remove()
9      }
10    });
11}
12$(function() {
13  $('#imageSlide')
14    .css({ opacity: 0 })
15    .animate({ opacity: 1 }, {
16      duration: 1500,
17      complete: function() {
18        setInterval(function() { photoFade(); }, 2000);
19      }
20    });
21});