CODEWITHSUNDEEP
javascriptjqueryanimationloopsfadein
Nata2ha Mayan2
Nata2ha Mayan2

Reputation: 484

setInterval to loop animation not working

I have a simple fadeIn fadeOut animation, it's basically a blinking arrow. However, it doesn't loop. It just goes once, and it's done. I found an answer here -> How to repeat (loop) Jquery fadein - fadeout - fadein, yet when I try to follow it, mine doesn't work.

The script for the animation is

<script type="text/javascript">
$(document).ready(function() {
    $('#picOne').fadeIn(1000).delay(3000).fadeOut(1000);
   $('#picTwo').delay(5000).fadeIn(1000).delay(3000).fadeOut(1000);
});
</script>

the script given in the answer is

$(function () {
    setInterval(function () {
        $('#abovelogo').fadeIn(1000).delay(2000).fadeOut(1500).delay(2000).fadeIn(1500);
    }, 5000);
});

so I assume the end combination would be

 $(document).ready(function() {
   setInterval(function () {
        $('#picOne').fadeIn(1000).delay(3000).fadeOut(1000);
       $('#picTwo').delay(5000).fadeIn(1000).delay(3000).fadeOut(1000);
    }, 5000);
});
    </script>

Could someone please point out what I'm doing wrong? thanks

Upvotes: 0

Views: 5101

Answers (4)

Joe Parry
Joe Parry

Reputation: 251

As animation sequences get more complex, I've found using async.js leads to more readable and maintainable code. Use the async.series call.

Upvotes: 0

Thomas Guillory
Thomas Guillory

Reputation: 5729

Two details :

  • You have to set the interval to 10000 because your animation run 10s

  • If you want it to start now, you have to call it one time before executing the interval (the first execution of the interval is after the delay)

--

$(document).ready(function() {

   function animate() {
       $('#picOne').fadeIn(1000).delay(3000).fadeOut(1000);
       $('#picTwo').delay(5000).fadeIn(1000).delay(3000).fadeOut(1000);
   }

   animate();
   setInterval(animate, 10000);
});​

Demonstration here : http://jsfiddle.net/bjhG7/1/

--

Alternative code using callback instead of setInterval (see comments):

$(document).ready(function() {

   function animate() {
       $('#picOne').fadeIn(1000).delay(3000).fadeOut(1000);
       $('#picTwo').delay(5000).fadeIn(1000).delay(3000).fadeOut(1000, animate);
   }

   animate();
});​

Demonstration here : http://jsfiddle.net/bjhG7/3/

Upvotes: 4

gilly3
gilly3

Reputation: 91587

Take advantage of the callback argument of .fadeOut(). Pass a reference to the function that does the fading as the callback parameter. Choose which image to fade based on a counter:

$(function() {
    var imgs = $('#picOne,#picTwo');
    var fadeCounter = 0;

    (function fadeImg() {
        imgs.eq(fadeCounter++ % 2).fadeIn(1000).delay(3000).fadeOut(1000, fadeImg);
    })();
});

Demo: http://jsfiddle.net/KFe5h/1

Upvotes: 1

socrateisabot
socrateisabot

Reputation: 847

function fadein(){
    $('#picOne,#picTwo').animate({'opacity':'1'},1000,fadeout())
}
function fadeout(){
    $('#picOne,#picTwo').animate({'opacity':'0'},1000,fadein())
}
fadein()

Upvotes: 1

Related Questions