Question

我知道jquery可以做到但我听说css更快，因为它没有javascript或jquery中涉及的所有逻辑。所以这就是问题，淡入淡出正在发挥作用，但它在文本切换之间发生得太快了。我尝试了多种变体，但无法弄清楚。

window.onload = function() {
   runSkills();
}

runSkills = function() {
    var array = [
        "W.",
        "G",
        "P",  
        "C",
        "A",
        "J"
];

var i = -1;
var interval = setInterval(function() {
    i++;
    var dyText = $(".dynamicText:last");
    dyText.addClass('dynamicTextOff');
    dyText.text(array[i]);
    if(i == array.length)
        i = 0;
}, 2000);
}

CSS：

.dynamicText {
    position: fixed;
    margin-left: 10px;
    -webkit-transition: opacity 550ms ease;
    -moz-transition: opacity 550ms ease;
    -o-transition: opacity 550ms ease;
    transition: opacity 550ms ease;
}

.dynamicTextOff {
    opacity: 0;
}

HTML：

<div class="centeredIntro"> 
    <div class="introMessage">
            Let Gravity do the Work
        </div>
        <span class="staticText">Hi, my name is <span class="title">Carine.</span>
        I'm a <span class="title dynamicText"></span>
        </span>
</div>

Answer 1

试试这个：

functionvar i = -1;
function changetext()
{
    i++;
    var dyText = $(".dynamicText:last");
    dyText.addClass('dynamicTextOff');
    dyText.text(array[i]);
    if(i == array.length)
        i = 0;
    setTimeout(changetext,2000);

}

希望它有所帮助：）

更新

$(document).ready(function()
{
    var i=-1;
    var array=["W.","G","P","C","A","J"];
    var dyText;
    function changetext()
    {
      i++;
      dyText=$(".dynamicText:last").addClass("dynamicTextOff").text(array[i]);
      if(i==array.length)
      {
        i=0;
      }
      setTimeout(changetext,2000);
    }
});

Answer 2

这是你在找什么？

http://jsfiddle.net/d741xa09/1/

runSkills = function() {
    var array = [
        "W.",
        "G",
        "P",  
        "C",
        "A",
        "J"
    ];

    var i = -1;
    var dyText = $(".dynamicText");


    dyText.addClass('dynamicTextOff');

    setInterval(function() {
        i += 1;
        dyText.text(array[i]);
        dyText.removeClass('dynamicTextOff');

        setTimeout(function() {
            dyText.addClass('dynamicTextOff');
        }, 500);



        if(i == array.length) {
            i = -1;
        }
    }, 2000);

}    


runSkills();

需要从css转换的时间间隔

2 个答案: