How to fade In/Out text + images

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>

Answer

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.

Advertisement

Answer