在jQuery中实现文本数组的淡入淡出

hvvq6cgz 于 2022-12-12 发布在 jQuery

关注(0)|答案(2)|浏览(160)

我有一个文本数组，我想在jQuery on中迭代并调用fadeIn和fadeOut函数。

var hellos = ["hi, i'm", "bonjour, je m'appelle", "hallo, ich heiße"]

html代码如下所示：

<h2><span id="hellos"></span>Ch1maera</h2>

理想的情况是，在我的网站首页上会出现“嗨，我是ch1maera”这样的文字，然后在不同的hello中循环，淡入淡出，而在屏幕上留下“ch1maera”。如果可能的话，我希望将“ch1maera”从hello中分离出来，这样它就停留在同一个位置，不会随着列表中hello的长度而移动。如果这有意义的话，怎么做呢

jquery

来源：https://stackoverflow.com/questions/43702061/implementing-fade-in-fade-out-on-array-of-text-in-jquery

2条答案

按热度按时间

mspsb9vt1#

你可以将h2的text-align设置为right，这样Ch1maera就不会被hello移动。
第一个

赞(0）回复(0）举报 2022-12-12

olqngx592#

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">

  
  <script src="https://code.jquery.com/jquery-3.5.0.js"></script>
  <script>
    var msg = ["Test Number 1", "Test Numero Dos", "Test, the third"];

$( document ).ready(function(){
    fade();
    setInterval(fade, 5000);
});

var i = 0;
function fade() {
  $('#message').fadeOut(1000, function() {
    i++;
    if(i>=msg.length)
    {
        i=0;
        
    }
    $('#message').html(msg[i])
    $('#message').fadeIn(1000)
 
  });
}
    
    
    </script>
</head>
<body>
    <div id="message" style="display:none;">TEST MESSAGE</div>

</body>
</html>

赞(0）回复(0）举报 2022-12-12

我来回答

在jQuery中实现文本数组的淡入淡出

2条答案

相关问题

热门标签

最新问答