Интервал, требующий перехода от css

Question

Я знаю, что jquery может это сделать, но я слышал, что css быстрее, потому что у него нет всей логики, связанной с javascript или jquery. Итак, вот проблема: работа Fade работает, но происходит слишком быстро между текстовыми переключателями. Я пробовал несколько вариантов, но просто не могу понять.

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();