Is it possible to run an infinite loop with jQuery each() fu
Posted: Tue Oct 18, 2011 2:42 pm
Hello folks, well the topic is self descriptive. I used the each() function to run a loop on a group of divs. The function takes a callback setTimeOut function to delay transitions, and this function in turn takes as its callback, two animate and a delay function which is basically the juice of the program. The end result is, each div slides in from the left , spends a few seconds on the screen, then slides out, followed by the next div. I want this to continue infinitely, not end with the last div. Is it possible to accomplish that with the each function? If so, what callback function do I use to accomplish that and where? Here is my code.
html
css
jQ
html
Code: Select all
<div class ="slide" id ="slide1">
</div> <!--closes slide1-->
<div class ="slide" id ="slide2">
</div> <!--closes slide2-->
<div class ="slide" id ="slide3">
</div> <!--closes slide3-->
<div class ="slide" id ="slide4">
</div> <!--closes slide4-->
Code: Select all
.slide{width:400px;height:240px;display:none;position:relative;top:40px;left:20px}
#slide1{background:red}
#slide2{background:green}
#slide3{background:blue}
#slide4{background:yellow}
jQ
Code: Select all
<script type = "text/javascript">
$(document).ready(function() {
$.each($('.slide'), function(i, val){
setTimeout(function(){
$(val).animate({width:"toggle"}, '4000').delay(3000).animate({width: "toggle"},'4000');
},4500 + (i*4500));
});
});
</script>