JQuery或Javascript旋转文本内的文本与文本数组的DIV

JQuery or Javascript to rotate text inside a DIV with text array

本文关键字：文本 DIV 数组 Javascript 旋转 JQuery      更新时间：2023-09-26

我有以下代码来旋转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 "notes"内工作得很好，唯一的问题是这个数学。随机的，不从首到尾显示数组中的消息。

我对javascript一无所知。测试和编辑了一整天的代码，却一无所获。知道怎么做吗?

您只需使用jquery函数fadeIn()来动画div，参见WORKED FIDDLE:

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

  • 控制动画通过"slow"或"fast"或以毫秒为单位指示持续时间 在函数参数中

FULL JS: 

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

看看这个

下面的代码可以达到你想要的效果:

function flash() {
   $( "div" ).show().fadeOut( "slow" );
}

__UPDATE__

试试这个:

请注意，我稍微改变了上面的div定义

  function flash() {
      $( "#notes" ).show().fadeOut( "slow" );
  }
相关文章：