How can I run this code over and over again?
I have this set of code fades in and out. I need to repeat it over and over, endlessly, while the page is open.
$(document).ready(function() {
$('.one').fadeTo(500, 1);
$('.one').fadeOut(500, 0, function(){
$('.two').fadeTo(500, 1);
$('.two').fadeOut(500, 0, function(){
$('.three').fadeTo(500, 1);
$('.three').fadeOut(500, 0, function(){
$('.four').fadeTo(500, 1);
$('.four').fadeOut(500, 0, function(){
$('.five').fadeTo(500, 1);
$('.five').fadeOut(500, 0, function(){
$('.six').fadeTo(500, 1);
$('.six').fadeOut(500,0);
});
});
});
});
});
});
$(document).ready(main);
I was thinking about setInterval, which works, but the whole loop lasts 60 seconds and setInterval does not start from 0, but at the time it is set.
In this case, I would have to set the interval to 60,000 and then wait one full minute before starting the loop.
Is there an easier way to run the function again? Or is there a way to trigger setInterval to 0?
source to share
It's a simple idea that takes an array of classes. It would be easy (and arguably better) to capture elements using a selector, but that should make it easier to use. Now you grab the first element from the array, use it to fade, and place it back at the end of the array. It must go on.
var fades = ['.one', '.two', '.three', '.four', '.five', '.six']
function fade_el() {
//grad element from array
let el_index = fades.shift()
// call fades
$(el_index).fadeTo(500, 1)
$(el_index).fadeOut(500, 0, function() {
// put element back at end of array
fades.push(el_index)
// recurse
fade_el()
})
}
$(document).ready(fade_el)
div {
width: 100px;
height: 100px;
background-color: grey;
margin: 10px;
display: inline-block;
opacity: 0
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="one"></div>
<div class="two"></div>
<div class="three"></div>
<div class="four"></div>
<div class="five"></div>
<div class="six"></div>
source to share
You can just extract your anonymous function from $document.ready()
. Then you call it once inside yours $document.ready()
and then use .setInterval()
to call it over and over again every 60 seconds, whatever you want.
I've presented a proof of concept that logs to the console every 5 seconds as a starting point for you:
$(document).ready(function(loop) {
loopFunction();
window.setInterval(loopFunction, 5000);
});
var loopFunction = function(loop) {
console.log('Runs every 5 seconds');
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
source to share
You can try using a recursive function to accomplish this.
function repeatFadeEffect(){
$('.one').fadeTo(500, 1);
$('.one').fadeOut(500, 0, function(){
$('.two').fadeTo(500, 1);
$('.two').fadeOut(500, 0, function(){
$('.three').fadeTo(500, 1);
$('.three').fadeOut(500, 0, function(){
$('.four').fadeTo(500, 1);
$('.four').fadeOut(500, 0, function(){
$('.five').fadeTo(500, 1);
$('.five').fadeOut(500, 0, function(){
$('.six').fadeTo(500, 1);
$('.six').fadeOut(500,0, function(){
// call your function again here or from where you want the process to restart
repeatFadeEffect();
});
});
});
});
});
});
});
}
$(document).ready(function(){
// call this function once to start the repeat effect.
repeatFadeEffect();
main();
});
It's not clear if you want to repeat the entire sequence, but using a recursive function call should give the desired result.
source to share
A recursive function is probably the best way to do this. Pull the various classes into an array and pass the fading function as a fadeOut callback, with the following index as a parameter:
// Array of classes
var classes = ['one', 'two', 'three', 'four', 'five', 'six'];
// Fading function, takes the array index for the next class
function fadeFunc(classNum) {
// Grab the element
var elem = $('.' + classes[classNum]);
// Fade in
elem.fadeTo(500, 1, function () {
// Fade out, passing fadeFunc the next index
elem.fadeOut(500, 0, function () {
fadeFunc((classNum + 1) % 6);
});
});
};
// Start with the first index
$(document).ready(function () {
fadeFunc(0);
});
Here's a working example .
source to share