jQuery - How to loop the function?

Question

I want to make a basic fadein fadeout slideshow.I only make it auto run once. How to make it have a loop??

html

<img src="image1.jpg" class="img1">
<img src="image2.jpg" class="img2">

js

$(document).ready(function () {
function playslider(){
        $('.img1').fadeIn(800).delay(800).fadeOut(800);
        $('.img2').delay(1600).fadeIn(800).delay(800).fadeOut(800);
}   
playslider();
});

NO,I make it--> fadeOut(800, playslider).And how to I make last image fadeout and cross with the next first image fadein?? — KnightMax
– KnightMax, Commented Mar 14, 2012 at 4:33

Abe Miessler · Accepted Answer · 2012-03-14 04:27:14Z

8

Try changing it to this:

$(document).ready(function () {
function playslider(){
        $('.img1').fadeIn(800).delay(800).fadeOut(800);
        $('.img2').delay(1600).fadeIn(800).delay(800).fadeOut(800, playslider);
                                                                 //^callback function
}   
playslider();
});

This is called a "callback function". The idea is that it gets called when your last fadeout completes. You can read more here.

answered Mar 14, 2012 at 4:27

Abe Miessler

85.6k104 gold badges323 silver badges496 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

KnightMax Over a year ago

Thanks.How to I make last image fadeout and cross with the next first image fadein.

Abe Miessler Over a year ago

Cross fading is beyond the scope of your current question and would be difficult for me to answer in a comment. I would recommend creating a new question for that particular problem. I will say that in the past I have typically used a jQuery plugin to handle cross fading.

Control Freak · Accepted Answer · 2012-03-14 04:30:38Z

2

You can use good old Javascript:

 $(document).ready(function () {
 function playslider(){
      // code to execute
     x = setTimeout("playslider()", 5000); //will loop every 5 seconds.
 }   
 playslider(); //start it up the first time

 });

answered Mar 14, 2012 at 4:30

Control Freak

13.2k31 gold badges101 silver badges150 bronze badges

Comments

Belabu · Accepted Answer · 2013-12-30 19:49:08Z

2

The answer is:

$(document).ready(function () {
 function playslider(){
      // code to execute
     x = setTimeout(function(){playslider()}, 5000);
 }   
 playslider();

 });

answered Dec 30, 2013 at 19:49

Belabu

313 bronze badges

Comments

navid saba · Accepted Answer · 2014-10-12 09:45:33Z

0

it works good but if u change it in this way it works better

    $('.img1').fadeIn(800).delay(800).fadeOut(800);
    $('.img2').delay(2400).fadeIn(800).delay(800).fadeOut(800, playslider);

just increase dalay time to 2400(2400=800+800+800)

answered Oct 12, 2014 at 9:45

navid saba

11 bronze badge

Collectives™ on Stack Overflow

jQuery - How to loop the function?

4 Answers 4

2 Comments

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

2 Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related