Tengo el siguiente código para cambiar el texto en el intervalo. Quiero agregar una transición para la opacidad al cambiar el texto. Hay otras respuestas que usan el método de entrada y salida gradual de jquery pero no funcionaron con el código javascript dado.
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>Código actualizado
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 agregado
#changetext{ opacity:0; transition: opacity 400msla transición solo funciona para el primer texto y también la transición tarda 3 segundos.
La forma más fácil es usar transiciones css:
#changeText { transition: opacity 400ms; }Luego puede establecer el valor de opacidad con JS, o incluso eliminar/agregar diferentes clases para acelerar o eliminar el efecto.
Dado que etiquetó jQuery pero parece que no usa ninguno, jQuery tiene animaciones de desvanecimiento incorporadas:
$('#changeText').finish().fadeTo(300, 0, function() { // do stuff // fade back in again $('#changeText').finish().fadeTo(300, 1); });Puede usar otro elemento como contenedor y cambiar la opacidad del contenedor. Si desea hacer que un texto se desvanezca en el siguiente, en lugar de desvanecerse hacia adentro y hacia afuera, entonces podría usar más de 1 elemento de intervalo aquí.
También tenga en cuenta que este es un código aproximado, aún no visualmente elegante, por lo que debe ajustar los tiempos a sus necesidades.
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>