javascript - 使用 Javascript 淡入/淡出数组列表中的单词

Question

我希望淡入/淡出对每个单词起作用，一个接一个。但是，它要么显示数组中的最后一个单词，要么显示所有内容。我正在使用 animate.css 并尝试使用 JQuery 来实现这种文字转换。请指教。谢谢

   <script>
    var classes = [ '<h1 class="animated infinite rotateOutUpLeft">Software        </h1>',
            '<h1 class="animated infinite rotateOutUpLeft">project </h1>',
            '<h1 class="animated infinite rotateOutUpLeft">Engineering</h1>',  
            '<h1 class="animated infinite rotateOutUpLeft">Science</h1>'
        ];

         var display;
            // var i = 10000000;
           for (i = 0; i < classes.length; i++) {
                document.write(i);
                $("#tst").empty();
                 $("#tst").append(classes[i]);
                // setTimeout(function(){alert('join');}, 10000);
                // $("#tst").append(classes[i]);
                // setTimeout(function(){$("#tst").append(classes[i]);}, 6000);
            }
</script>

Answer 1

您是否正在寻找代码来每六秒更改一次单词，而 CSS 正在逐渐消失？如果是这样，这可能会起作用:

var i = 0;
$("#tst").html(classes[i]);
setInterval(function() {
    i = (i + 1) % classes.length;
    $("#tst").html(classes[i]);
}, 6000);

jsfiddle

或者:

(function displayClass(i) {
    $("#tst").html(classes[i]);
    setTimeout(function() {
        displayClass((i + 1) % classes.length);
    }, 6000);
})(0);

jsfiddle

如果您希望代码执行淡入淡出:

var classes = ['Software', 'project', 'Engineering', 'Science'];
(function displayClass(i) {
    $('#tst h1').text(classes[i]).fadeIn(1000).delay(600).fadeOut(1000, function() {
        displayClass((i + 1) % classes.length);
    });
})(0);

jsfiddle