Jqueryで配列の要素を表示させる方法を教えて下さい。

前提・実現したいこと

ホームページ作成をしています。
Jqueryを用いて配列内のテキストを最初に一つ表示してフェードアウト後に次のテキストを表示させたいです。
上記を実装しようとしましたが、目視では始めに最後の配列要素が表示されてしまいます。
配列内の最初の要素から目視で表示される様にしたいです。

該当のソースコード

(html)

<!DOCTYPE html> <html lang="ja"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <link rel="stylesheet" href="css/style.css"> <link rel="stylesheet" href="css/destyle.css"> <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script> <title>Practice1</title> </head> <body> <script src="js/script.js"></script> <div class="wrapper"> <p class="wrapper-text"></p> </div> </body> </html>

(scss)
.wrapper{
width: 500px;
height: 500px;
text-align: center;
border: 1px solid #000;
position: relative;
&-text{
position: absolute;
top: 50%;
left: 50%;
transform: translateY(-50%) translateX(-50%);
color: #000;
font-size: 20px;
}
}

(jquery)
$(function(){
var array=['text1','text2','text3'];
for( var i=0; i<array.length; i++){
$('.wrapper-text').text(array[i]);
$('.wrapper-text').fadeOut(5000);
}
});

試したこと

・ブラウザの検証画面のconsoleという所でjqueryのconsole.log()という機能を使用し、プログラムが配列内の最初の要素の部分から動いているか確認しましたが、プログラムは動いていました。
・表示スピードが早いのかと思いjqueryのsetTimeoutやsetTimeoutの関数で遅延を試みましたが結果は変わりませんでした。

※詳しい方いらっしゃいましたらご教授願います。

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

回答2件

ベストアンサー

javascript
1<script>
2$(function(){
3  var array=['text1','text2','text3'];
4  for(let i=0;i<array.length;i++){
5    $(this).queue(function(){
6      $('.wrapper-text').show().text(array[i]).fadeOut(900);
7      $(this).dequeue();
8    }).delay(1000);
9  }
10});
11</script>
12<div class="wrapper-text"></div>

投稿2021/05/12 08:02

yambejp

総合スコア116835

Tatsuya_1985

2021/05/12 08:11

実装できました！大変参考になります。ありがとうございました。

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

こうですか？

css
1$(async function () {
2    var array = ['text1', 'text2', 'text3'];
3    for (var i = 0; i < array.length; i++) {
4        $('.wrapper-text').show();
5        $('.wrapper-text').text(array[i]);
6        await $('.wrapper-text').fadeOut(5000).promise();
7    }
8})