fadeOutがうまくいかない

ビジュアル画像のフェードアウトができない

ビジュアル画像のフェードアウトがうまくいきません。
Chromeの検証機能で確認した際は、画像の部分の値がゆっくりとフェードアウトしているのですが
実際に画面で見た際は、フェードアウトの時だけ
画像が「サッ」と　素早く消えて、次の画像がゆっくりフェードインする感じになります。

フェードアウトもうまくできるようにアドバイスお願い致します..!

情報

・２枚の画像が交互にフェードイン・フェードアウトで出てくる感じ
・https://www.design-memo.com/coding/jquery-fade-image　(参考サイト)
・画像の上には擬似要素で薄暗いレイヤーがあり
・さらにそのレイヤーの上にはh2タグで囲む文字があり。

コード

HTML
1
2<section class="topvisual">
3    <div class="topvisual-wrap">
4        <img src="img/xxxx.png" alt="写真">
5        <img src="img/xxxx.png" alt="写真">
6    </div><!--topvisual-wrap-->
7
8    <h2>タイトルタイトル</h2>
9
10</section><!--topvisual-->

jquery
1$(function(){
2  $(".topvisual-wrap img:not(:first-child)").hide();
3  
4  setInterval(function() {
5    $(".topvisual-wrap img:first-child").fadeOut(1500).next("img").fadeIn(1500).end().appendTo(".topvisual-wrap");
6  },5000);
7});

css
1
2.topvisual {
3  width: 100%;
4  height: 520px;
5  position: relative;
6  background-color: black;
7  /*wrap*/
8  /*wrap:before*/
9  /*h2*/
10}
11
12.topvisual-wrap {
13  opacity: 0;
14  -webkit-transform: translateY(20px);
15          transform: translateY(20px);
16  /*img*/
17}
18
19
20.topvisual-wrap img {
21  width: 100%;
22  height: 520px;
23  -o-object-fit: cover;
24     object-fit: cover;
25}
26
27
28.topvisual .topvisualactive {
29  opacity: 1;
30  -webkit-transition: 2s;
31  transition: 2s;
32  -webkit-transform: translateY(0px);
33          transform: translateY(0px);
34}
35
36.topvisual-wrap:after {
37  background-color: rgba(0, 0, 0, 0.5);
38  /* どの範囲に重ねるかを指定 */
39  position: absolute;
40  top: 0;
41  right: 0;
42  bottom: 0;
43  left: 0;
44  content: ' ';
45}
46
47.topvisual h2 {
48  position: absolute;
49  font-size: 35px;
50  font-family: 'Noto Serif JP', sans-serif;
51  color: white;
52  top: 50%;
53  left: 50%;
54  -webkit-transform: translate(-50%, -50%);
55          transform: translate(-50%, -50%);
56  font-weight: normal;
57  letter-spacing: 12px;
58  width: 100%;
59  text-align: center;
60}
61