Estoy tratando de crear un área de reseñas dentro de mi sitio web, para mostrar algunas reseñas de clientes que recopilé + su logotipo. ¡Por ahora, he logrado cambiar ambos (revisión + logotipo) cada 5 segundos :)! ¡funciona!
Lo que estoy tratando de lograr ahora es desvanecerme/desaparecer y desvanecerme/aparecer en la próxima revisión + logotipo. No estoy seguro de dónde debo buscar al respecto, ¿alguien puede indicarme la publicación o el artículo correcto? Gracias
var review = new Array(); review.push("Text1"); review.push("Text2"); review.push("Text3"); var clientlogo = new Array(); clientlogo.push(""); clientlogo.push(""); clientlogo.push(""); var point = 0; function changeText(){ $('.review').html(review[point]); $('.client-logo').attr('src',clientlogo[point]); if(point < ( review.length - 1 ) ){ point++; }else{ point = 0; } } setInterval(changeText, 5000); /*Call it here*/ changeText(); body { display: flex; flex-direction: column; justify-content: center; align-items: center; background-color: #4d4d4d; margin: 0 auto; } .review-container { width: 400px; height: auto; display: flex; flex-direction: column; justify-content: center; align-items: center; background-color: #4d4d4d; color: white; } <script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.7.5/angular.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <div class="review-container"> <div class="review"></div> <img class="client-logo" src=""/> </div>jQuery incluye cosas para desvanecerse: https://api.jquery.com/category/effects/fading/
Se necesita una función de devolución de llamada que se llama una vez que finaliza la animación. Puede usar esto para desvanecerse en la próxima revisión después de que la anterior haya terminado de desvanecerse.
previousReview.fadeOut(delay, function() { nextReview.fadeIn(delay) }); Y luego aún puede usar su llamada setInterval para saber con qué frecuencia ejecutar esto.