使用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