Как мне написать хороший, мягкий скрипт-модификатор или улучшить этот jquery?

Question

У меня есть пример, но как я могу применить эффект? как затухание. это мой пример

<script>          
jQuery(function ($) {
    var roles = ['الرجاء اختيار لغتك', 'Choisissez votre langue', '请选择您的语言', 'Please select your language', 'Выберите ваш язык', 'Selecione seu idioma', 'لطفا زبان خود را انتخاب کنید', 'Please select your language', 'Lütfen dilinizi seçiniz', '言語を選択してください', 'შეარჩიე შენი ენა', 'Please select your language', 'בחר את השפה שלך', 'Sila Pilih Bahasa Anda', '請選擇您的語言', 'Please Select Your Language', 'Виберіть свою мову', '언어를 선택하십시오', 'अपनी भाषा का चयन करें'];
    //used to determine which is the next roles to be displayed
    var counter = 0;
    var $role = $('.role-cha-l')
    //repeat the passed function at the specified interval - it is in milliseconds
    setInterval(function () {
        //display the role and increment the counter to point to next role
        $role.text(roles[counter++]);
        //if it is the last role in the array point back to the first item
        if (counter >= roles.length) {
            counter = 11;
        }
    }, 2500)
})  </script>```

Answer 1

Это бы сработало:

    var roles = ['الرجاء اختيار لغتك', 'Choisissez votre langue', '请选择您的语言', 'Please select your language', 'Выберите ваш язык', 'Selecione seu idioma', 'لطفا زبان خود را انتخاب کنید', 'Please select your language', 'Lütfen dilinizi seçiniz', '言語を選択してください', 'შეარჩიე შენი ენა', 'Please select your language', 'בחר את השפה שלך', 'Sila Pilih Bahasa Anda', '請選擇您的語言', 'Please Select Your Language', 'Виберіть свою мову', '언어를 선택하십시오', 'अपनी भाषा का चयन करें'];
    //used to determine which is the next roles to be displayed
    var counter = 0;
    var $role = $('#role-cha-l')
    //repeat the passed function at the specified interval - it is in milliseconds
    setInterval(function () {
        //display the role and increment the counter to point to next role
      
        $role.fadeOut(1000,function(){$(this).text(roles[counter++]).fadeIn(1000);
});


        //if it is the last role in the array point back to the first item
        if (counter >= roles.length) {
            counter = 11;
        }
    }, 2000)

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="role-cha-l">
Kies uw taal
</div>