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
JavaScript
x
24
24
1
var review = new Array();
2
review.push("Text1");
3
review.push("Text2");
4
review.push("Text3");
5
6
var clientlogo = new Array();
7
clientlogo.push("");
8
clientlogo.push("");
9
clientlogo.push("");
10
11
var point = 0;
12
13
function changeText(){
14
$('.review').html(review[point]);
15
$('.client-logo').attr('src',clientlogo[point]);
16
if(point < ( review.length - 1 ) ){
17
point++;
18
}else{
19
point = 0;
20
}
21
}
22
23
setInterval(changeText, 5000); /*Call it here*/
24
changeText();
JavaScript
1
19
19
1
body {
2
display: flex;
3
flex-direction: column;
4
justify-content: center;
5
align-items: center;
6
background-color: #4d4d4d;
7
margin: 0 auto;
8
}
9
10
.review-container {
11
width: 400px;
12
height: auto;
13
display: flex;
14
flex-direction: column;
15
justify-content: center;
16
align-items: center;
17
background-color: #4d4d4d;
18
color: white;
19
}
JavaScript
1
7
1
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.7.5/angular.min.js"></script>
2
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
3
4
<div class="review-container">
5
<div class="review"></div>
6
<img class="client-logo" src=""/>
7
</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.
JavaScript
1
2
1
previousReview.fadeOut(delay, function() { nextReview.fadeIn(delay) });
2
And then you can still use your setInterval
call to know how often to run this.