Question

我有一个javascript函数可以每隔几秒更改一个单词。这是代码：

<div id="changeText" >Hello</div>

 <script type="text/javascript">
var text = ["Welcome", "Hi", "Sup dude"];
var counter = 0;
var elem = document.getElementById("changeText");
setInterval(change, 5000);
function change() {
 elem.innerHTML = text[counter];
    counter++;
    if(counter >= text.length) { counter = 0; }
}
</script>

这很好用，但是我想知道是否有办法让文字淡入/淡出以便它看起来更好？

Answer 1

由于您标记了jQuery这个问题，我认为jQuery已被接受。

在这种情况下，请更改：

elem.innerHTML = text[counter];

到

elem.html(text[counter]).fadeOut().fadeIn();

Fiddle

Answer 2

这就是我要做的事情：淡出文字，改变它，然后淡入它。

var text = ["Welcome", "Hi", "Sup dude"];
var counter = 0;
var elem = document.getElementById("changeText");

setInterval(change, 1500);

function change() {
  $(elem).fadeOut('fast', function() {
    $(elem).text(text[counter++]);

    if (counter >= text.length) {
      counter = 0;
    }

    $(elem).fadeIn('fast');
  });
}

https://jsfiddle.net/r6h4xw5s/

在javascript间隔

2 个答案: