Блог

Я создаю некоторый код для изменения элемента HTML с помощью setTimeout() .

Можно ли сделать другой способ сделать более красивую анимацию, например, элемент появляется медленно?

Я связался с setInterval(), я пробовал с fadeIn(), но я не знаю, что с этим делать.

 var words= [' Web', ' Fullstack', ' Mobile', ' Php'];

var i = 0;

var word = document.getElementById("word");

function newWord(){
    word.innerHTML = words[i];

    if(i < words.length - 1){
        i  ;
    }
    else{
        i = 0;
    }

    setTimeout("newWord()", 2000);

    }

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

вот так это работает, слово меняется каждые 2 секунды, но я хочу, чтобы некоторые эффекты при изменении слова менялись.

Вы можете добавить переход к тексту с помощью CSS:

 #word {
  transition: transition-length linear all;
}
  

Это создает переход для каждого элемента стиля, который вы изменяете с помощью JavaScript

Я нахожу, что что-то работает.

Я просто поставил это :

 $('#word').fadeOut(2000, function(){ $('#word').fadeIn(2000);});
  

после else и это работает довольно хорошо.