javascript - 如何在 html 中实现快速闪烁文本或简单地更快地替换文本(我的代码如下)

标签 javascript jquery html

我正在尝试使用此代码替换单个 div 中的一堆单词,但它太慢并且闪烁,我希望它快一些,用户可以看到它正在变化,但无法正确读取它,因为它会很快。 (我也尝试过减少毫秒数,但结果一次又一次地显示相同的单词)请帮忙

(function(){
  var words = ['awesome','incredible','cool','fantastic','function',
'words','var','script','html','fadeOut','body','fadeIn','length','creative','drama',
  ], i = 0;
  setInterval(function(){
    $('#changerificwordspanid').fadeOut(function(){
      $(this).html(words[i=(i+2)%words.length]).fadeIn();
    });
  }, 1000);

})();
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<span id="changerificwordspanid">awesome</span>

最佳答案

希望这有帮助

(function() {
  var words = ['awesome', 'incredible', 'cool', 'fantastic', 'function', 'words', 'var', 'script', 'html', 'fadeOut', 'body', 'fadeIn', 'length', 'creative',
      'drama',
    ],
    i = 0;
  setInterval(function() {
    $('#changerificwordspanid').html(function() {
      $(this).html(words[i = (i + 2) % words.length]).fadeIn();
    });
  }, 50);


})();
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<body>

  <span id="changerificwordspanid">awesome</span>

</body>

关于javascript - 如何在 html 中实现快速闪烁文本或简单地更快地替换文本(我的代码如下),我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/59434193/

相关文章:

javascript - 如何在没有任何额外依赖的情况下在浏览器中使用 UMD

javascript - React(来自 Facebook 的应用程序框架)和react.js(JS 的响应式(Reactive)扩展)之间有什么区别/相似之处?

javascript - 如何解决以下 es-lint warnings-Warning as '' Expected to return a value”?

html - 对齐按钮和输入的右侧

使用鼠标位置改变div样式的Javascript函数

javascript - 需要保留从用户输入的文本区域到电子邮件正文的换行符

jquery - 扩展 Bootstrap Typeahead 插件

javascript - Twitter API 从中获取一条推文并在代码中使用它

JQuery:如何替换某些字符之间的所有字符?

javascript - 如何将一个 div 拖放到另一个 div 上