Question

我的JAVASCRIPT代码低于每2.5秒2个字之间的变化，我想在它使用的数组中的单词之间添加渐变。我知道我需要使用Jquery但是如何在这个递归函数中实现它？有什么想法吗？

HTML

<h2 id="changeText">Data Scientist</h2>

JAVASCRIPT

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

CSS

.banner-right h2{
  font-size: 50px;
  font-weight: 300;
  color: #ffffff;
  margin: 15px 0 45px 0;}

Answer 1

由于您使用的是Native JavaScript，因此可以使用CSS过渡和classList。

类似的东西：

CSS

#changeText {
    opacity: 1;
    transition: opacity 0.5s;
}
.hide {
    opacity: 0 !important;
}

的JavaScript

function change() {
    elem.classList.add('hide');
    setTimeout(function () {
        elem.innerHTML = text[counter];
        elem.classList.remove('hide');
        counter++;
        if (counter >= text.length) {
            counter = 0;
        }
    }, 500);
}

jsFiddle：http://jsfiddle.net/nt97pazr/

注意：我在CSS中使用了!important因为opacity: 1;在应用ID选择器时优先于类选择器。

Answer 2

替换此部分：

elem.innerHTML = text[counter];

使用：

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

如何在javascript中更改文本之间添加淡入和淡出

2 个答案:

jsFiddle：http://jsfiddle.net/nt97pazr/