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>
Advertisement
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.