setInterval循环动画不起作用

Question

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

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

the script given in the answer is

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

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

Answer 1

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/

Answer 2

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

Answer 3

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

Answer 4

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