Tuesday, 18 September 2018

How to create jQuery fadeIn fadeOut Animation

How to create jQuery fadeIn fadeOut Animation

Html:
<ul>
<li class="client-testimonial"><img src="demo1.png"></li>
<li class="client-testimonial"><img src="demo2.png"></li>
<li class="client-testimonial"><img src="demo3.png"></li>
<li class="client-testimonial"><img src="demo4.png"></li>
</ul>


jQuery:

jQuery(document).ready(function(){
if(jQuery('.client-testimonial').length > 0){
var showImg = jQuery(".client-testimonial-img");
var quoteIndex = -1;

function showFadeInFadeOut() {
++quoteIndex;
showImg.eq(quoteIndex % showImg.length)
.fadeIn(2000)
.delay(2000)
.fadeOut(2000, showFadeInFadeOut);
}
showFadeInFadeOut();
}

});

0 comments:

Post a Comment