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();
}

});

2 comments:

  1. It's very useful blog post with informative and insightful content and i had good experience with this information.I have gone through CRS Info Solutions Home which really nice. Learn more details About Us of CRS info solutions. Here you can see the Courses CRS Info Solutions full list. Find Student Registration page and register now. Go through Blog post of crs info solutions. I just read these Reviews of crs really great. You can now Contact Us of crs info solutions. You enroll for Pega Training at crs info solutions.

    ReplyDelete
  2. Machine Learning Projects for Final Year machine learning projects for final year

    Deep Learning Projects assist final year students with improving your applied Deep Learning skills rapidly while allowing you to investigate an intriguing point. Furthermore, you can include Deep Learning projects for final year into your portfolio, making it simpler to get a vocation, discover cool profession openings, and Deep Learning Projects for Final Year even arrange a more significant compensation.

    Python Training in Chennai Python Training in Chennai Angular Training Project Centers in Chennai

    ReplyDelete