javascript - 如何在这个txt更改循环中添加淡入/淡出？

您所看到的当前运行，仅更改txt。
如您所见，我尝试使每次更改的文本淡入淡出。
坦率地说，我对应该如何处理这个问题感到迷lost。我的代码中必须有一个简单的补充。环顾四周，我只看到了使我完全重新开始的例子。

$(document).ready(function(){
var slogan = [];
            slogan[0] = "Canopy Sports";
            slogan[1] = "Ads";
            slogan[2] = "Vidoes";
            slogan[3] = "Shananigans";

                    var newSlogan = document.getElementById("slogan");

            // generate a # between 1 &4
            function generateRandomNumber(){
                return Math.floor(Math.random()*slogan.length)+1;
            }

            function updateslogan () {
                // var interval = generateRandomNumber();
                newSlogan.innerHTML = slogan[generateRandomNumber()-1]
            }


            updateslogan();

            function getNew () {
                // var interval = generateRandomNumber();
                fade = $(updateslogan).fadeIn("slow", function(){
      $(this).fadeOut("slow")
    });
            }

            setInterval(getNew,4000);
});

我必须使用淡入/淡出，谢谢！

最佳答案

$(document).ready(function () {
    var slogan = [
        "Canopy Sports",
        "Ads",
        "Vidoes",
        "Shananigans"
    ],
    newSlogan = $("#slogan");

    function getNew() {
        newSlogan.html(slogan[Math.floor(Math.random() * slogan.length)])

        newSlogan.fadeIn("slow", function () {
                $(this).fadeOut("slow")
        });
    }

    setInterval(getNew, 4000);
});

FIDDLE