javascript - setInterval to loop animation not working - Stack Overflow

admin管理员组

文章数量:1410705

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 bination 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

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 bination 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

• javascript
• jquery
• animation
• loops
• fadein

Share Improve this question Follow edited May 23, 2017 at 12:20 CommunityBot 111 silver badge asked Apr 14, 2012 at 6:36 Nata2ha Mayan2Nata2ha Mayan2 48411 gold badge1010 silver badges2424 bronze badges 1

• I wouldn't expect that to work well at all. I mean, your animation runs for 10+ seconds but your interval is set to 5... – elclanrs Commented Apr 14, 2012 at 6:39

Add a ment  | 

4 Answers 4

Sorted by: Reset to default 4

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/bjhG7/1/

--

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

$(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/bjhG7/3/

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

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/KFe5h/1

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

本文标签： javascriptsetInterval to loop animation not workingStack Overflow