如何使用jQuery淡入淡出文本？

Question

这是我的代码：我想基本上使用var text crossfade。

JS：

var text = ["ease your mind.", "focus.", "sleep better."];
var counter = 0;
var elem = document.getElementById("changeText");
setInterval(change, 2000);
function change() {
 elem.innerHTML = text[counter];
    counter++;
    if(counter >= text.length) { counter = 0; }
}

HTML：

<span id="changeText" class="italic bold">ease your mind.</span>

Answer 1

您可以使用$.fadeIn和$.fadeOut：

执行此操作

＆＃13;

＆＃13;

var text = ["ease your mind.", "focus.", "sleep better."];
var counter = 1;
var elem = document.getElementById("changeText");
setInterval(change, 2000);

function change() {
    $(elem).fadeOut(400, function() {
        $(elem).html(text[counter++]).fadeIn(400);
        if (counter >= text.length) counter = 0;
    });
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<span id="changeText" class="italic bold">ease your mind.</span>

＆＃13;

＆＃13;

＆＃13;