javascript - JQuery 或 Javascript 在带有文本数组的 DIV 中旋转文本

Question

我有以下代码来旋转 DIV 中的文本内容。它工作正常，但消息是随机显示的，而不是从头到尾按顺序显示，有时它们甚至会重复两次或更多

 <script type="text/javascript">
    var textarray = [
        "message one",
        "now message two",
        "last but not least message three"
    ];

    var $ryt=$('#notes');

    function RndText(){
        var rannum=Math.floor(Math.random()*textarray.length);
        $ryt.html(textarray[rannum]).hide().fadeIn('slow');
    }

    onload=function(){
        RndText();
    }

    var inter=setInterval(function(){
        RndText();
    },3000);

</script>

显示文本，旋转和淡入淡出效果在 DIV“注释”中工作正常，唯一的问题是这个 math.random 不从头到尾显示数组中的消息。

我对javascript一无所知。一整天都在测试和编辑代码，但一无所获。知道怎么做吗？

Answer 1

您只需使用 jquery 函数 fadeIn() 来为 div 设置动画，请参阅 WORKED FIDDLE :

• fadeIn() 方法逐渐改变所选元素的不透明度，从隐藏到可见(淡化效果)。

• 要控制动画，请将“慢”或“快”或以毫秒为单位的持续时间传递给函数。

完整的 JS:

setInterval(function(){
    i = i == textArray.length ? 0 : i;   
    $('#notes').text(textArray[i]).hide().fadeIn('slow');
    i++;
},5000);