У меня есть приведенный ниже код для изменения текста в интервале. Я хочу добавить переход для непрозрачности при изменении текста. Есть и другие ответы, которые используют метод постепенного появления и исчезновения jquery, но не работают с данным кодом javascript.

var text = ["Welcome", "Hi", "Sup dude"];
var counter = 0;
var elem = document.getElementById("changeText");
var inst = setInterval(change, 1000);

function change() {
  elem.innerHTML = text[counter];
  counter++;
  if (counter >= text.length) {
    counter = 0;
    // clearInterval(inst); // uncomment this if you want to stop refreshing after one cycle
  }
}
<div id="changeText"></div>

Обновленный код

function change() {
      elem.innerHTML = text[counter];
      document.getElementById('s2main').style.opacity = 1;
      counter++;
      if (counter >= text.length) {
        counter = 0;
        // clearInterval(inst); // uncomment this if you want to stop refreshing after one cycle
      }
    }

Добавлен CSS

#changetext{
opacity:0;
transition: opacity 400ms

Переход работает только для первого текста, также переход занимает 3 секунды.

1
tru_shar 11 Окт 2021 в 10:43

2 ответа

Лучший ответ

Вы можете использовать другой элемент в качестве контейнера и изменить его непрозрачность. Если вы хотите, чтобы один текст переходил в следующий, а не исчезал и появлялся, вы можете использовать здесь более 1 элемента span.

Также обратите внимание, что это грубый код, еще не визуально элегантный, поэтому вам следует настроить тайминги в соответствии с вашими потребностями.

var text = ["Welcome", "Hi", "Sup dude"];

var counter = 0;
var elem = document.getElementById("changeText");
var elemContainer = document.getElementById("changeTextContainer");
var inst = setInterval(change, 1000);

function showText() {
    elemContainer.style.opacity = 1;
}
function change() {
    elemContainer.style.opacity = 0;
    elem.innerHTML = text[counter];
    setTimeout (showText, 500);
    counter++;
    if (counter >= text.length) {
        counter = 0;
    }
}
#changeTextContainer {
    transition: opacity 400ms;
}
<div id="changeTextContainer"><span id="changeText"></span></div>
0
Ingo Steinke 11 Окт 2021 в 08:17

Самый простой способ - использовать css-переходы:

#changeText {
    transition: opacity 400ms;
}

Затем вы можете установить значение непрозрачности с помощью JS или даже удалить / добавить разные классы, чтобы ускорить или удалить эффект.

Поскольку вы отметили jQuery, но, похоже, не используете его, jQuery имеет встроенную анимацию затухания:

$('#changeText').finish().fadeTo(300, 0, function() {
    // do stuff
    // fade back in again
    $('#changeText').finish().fadeTo(300, 1);
});
1
Alex 11 Окт 2021 в 07:56