setInterval()

Question

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

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

我提前感谢任何帮助。

Answer 1

要每10秒触发一次，请使用setInterval。然后，您只需要使用.fadeIn()，.fadeOut()或任何其他effect：

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

这是 DEMO 。

Answer 2

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

setInterval()

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

.fadeToggle()

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

将这些函数与数组结合使用

Math.random()

random（）方法返回0到1之间的随机数。

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

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

2 个答案:

setInterval()

.fadeToggle()

Math.random()