加载页面每10秒显示一条不同的消息

Question

我想创建一个加载页面，每10秒显示一条消息，就像Mibbit Web Chat加载页面上的消息一样。我要么希望消息淡出，然后显示一条新消息，要么也可以将当前消息向左滑动，新消息从右侧滑动。我相信这并不像我想象的那么困难，但我在任何地方都找不到答案。

我完全可以使用Javascript或jQuery，因为我确信这是唯一的方法。

我感谢你的帮助。

Answer 1

要每隔10秒启动一个函数，请使用setInterval。然后，你只需要玩.fadeIn()、.fadeOut()或任何其他效果：

var i = 1;
var sampleMessages = [ "First message", "Second message", "Third, now repeat" ];
setInterval(function() {
  var newText = sampleMessages[i++ % sampleMessages.length];
  $("#message").fadeOut(500, function () {
    $(this).text(newText).fadeIn(500);
  });
}, 10 * 1000);​ // Interval is in milliseconds

这是一个演示。

Answer 2

我不会为您编写代码。但这里有一些东西可以让你朝着正确的方向前进。

setInterval（）

setInterval（）方法将等待指定的毫秒数，然后执行指定的函数，它将继续执行函数，每给定时间间隔一次。

.fadeToggle（）

.fadeToggle（）方法对匹配元素的不透明度设置动画。在可见元素上调用时，该元素的显示样式属性在不透明度达到0时设置为none，因此元素不再影响页面的布局。

将这些功能与阵列结合使用

Math.random（）

random（）方法返回一个介于0和1之间的随机数。

使用这些方法的组合，再加上一系列随机短语，你应该能够达到你想要的结果。