I'm trying to create a reviews area within my website, to display some clients reviews I gathered + their logo. For now, I've managed to change both (review+logo) every 5 seconds :)! it works!
What I'm trying to achieve now is to fade/out and fade/in the next review + logo. I'm not sure where should I search about it, can someone point me towards the right post or article? thanks
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 includes stuff for fading: https://api.jquery.com/category/effects/fading/
It takes a callback function that's called once the animation is finished. You can use this to fade in the next review after the previous one is finished fading out.
previousReview.fadeOut(delay, function() { nextReview.fadeIn(delay) });
And then you can still use your setInterval call to know how often to run this.