Trying to make it so that my text colors will alternate blinking forever but for not working with infinite loop, is there a better way?
Question
I am trying to make a few words in text flash colors repeatedly I set an infinite for loop to contain the code but its not working as the time is 5secs Can someone tell me whats wrong with my code to get the result I am looking for? Although I dont think the issue is my html file I added it in anyways I am pretty sure its related to the animation duration time Thank you in advance
$(function() {
for (var h = 0; h < 1000; h++) {
setTimeout(function() {
$('li.color-0').removeClass('hidden');
}, 1000);
setTimeout(function() {
$('li.color-1').removeClass('hidden');
}, 1200);
setTimeout(function() {
$('li.color-2').removeClass('hidden');
}, 1400);
setTimeout(function() {
$('li.color-3').removeClass('hidden');
}, 1600);
setTimeout(function() {
$('li.color-4').removeClass('hidden');
}, 1800);
setTimeout(function() {
$('li.color-5').removeClass('hidden');
}, 2000);
setTimeout(function() {
$('li.color-6').removeClass('hidden');
}, 2200);
setTimeout(function() {
$('li.color-7').removeClass('hidden');
}, 2600);
setTimeout(function() {
$('li.color-8').removeClass('hidden');
}, 2800);
setTimeout(function() {
$('li.color-9').removeClass('hidden');
}, 3000);
setTimeout(function() {
$('li.color-10').removeClass('hidden');
}, 3200);
setTimeout(function() {
$('li.color-11').removeClass('hidden');
}, 3400);
setTimeout(function() {
$('li.color-12').removeClass('hidden');
}, 3600);
setTimeout(function() {
$('li.color-12').addClass('hidden');
}, 3800);
setTimeout(function() {
$('li.color-11').addClass('hidden');
}, 4000);
setTimeout(function() {
$('li.color-10').addClass('hidden');
}, 4200);
setTimeout(function() {
$('li.color-9').addClass('hidden');
}, 4400);
setTimeout(function() {
$('li.color-8').addClass('hidden');
}, 4600);
setTimeout(function() {
$('li.color-7').addClass('hidden');
}, 4800);
setTimeout(function() {
$('li.color-6').addClass('hidden');
}, 5000);
setTimeout(function() {
$('li.color-5').addClass('hidden');
}, 5200);
setTimeout(function() {
$('li.color-4').addClass('hidden');
}, 5400);
setTimeout(function() {
$('li.color-3').addClass('hidden');
}, 5600);
setTimeout(function() {
$('li.color-2').addClass('hidden');
}, 5800);
setTimeout(function() {
$('li.color-1').addClass('hidden');
}, 6000);
setTimeout(function() {
$('li.color-0').addClass('hidden');
}, 6200);
/* setTimeout(function() {
$('.fly-in-text').remove();
}, 6400);
*/
}
<div class="wrapper">
<section class="content">
<div class="columns">
<main class="main">
<div class="container-fluid">
<ul class="fly-in-text">
<li class="color-0">C</li>
<li class="color-1">J</li>
<li class="color-2">s</li>
<br>
<li class="color-3">P</li>
<li class="color-4">i</li>
<li class="color-5">z</li>
<li class="color-6">z</li>
<li class="color-7">a</li>
<br>
<li class="color-8">P</li>
<li class="color-9">l</li>
<li class="color-10">a</li>
<li class="color-11">c</li>
<li class="color-12">e</li>
</ul>
</div>
@import url('https://fonts.googleapis.com/css2?family=Indie+Flower&family=Pacifico&display=swap');
body{
margin: 0;
}
.wrapper{
min-height: 100vh;
background: #ccc;
display: flex;
flex-direction: column;
}
.content {
display: flex;
flex: 1;
background: #999;
color: #000;
}
.columns{
display: flex;
flex:1;
}
.main{
flex: 1;
order: 2;
background: #eee;
}
.sidebar-1 {
width: 30%;
background: #000000;
order: 1;
}
.sidebar-2 {
width: 30%;
order: 3;
background: #000000;
}
/* Welcome Page Animation */
.fly-in-text {
list-style: none;
position: absolute;
left: 0;
top: 0;
height: 100%;
width: 100%;
z-index: 2;
}
.fly-in-text li {
display: inline-block;
margin-right: 50px;
font-family: 'Indie Flower', cursive;
font-weight: 300;
font-size: 4em;
color: #fff;
opacity: 2;
transform: translate(380px, 300px);
}
.fly-in-text li:last-child, .fly-in-text li:last-child {
margin-right: 0;
}
.fly-in-text.hidden li {
opacity: 0;
}
/* rainbow color setting */
@-webkit-keyframes flashycolor {
0% {color:#FF4D4D;}
25% {color:#FFF94D;}
50% {color:#40CFFF;}
75% {color:#61FF4D;}
100% {color:#EF56FC;}
}
@keyframes flashycolor {
0% {color:#FF4D4D;}
25% {color:#FFF94D;}
50% {color:#40CFFF;}
75% {color:#61FF4D;}
100% {color:#EF56FC;}
}
@-webkit-keyframes flashycolor1 {
0% {color:#EF56FC;}
25% {color:#FF4D4D;}
50% {color:#FFF94D;}
75% {color:#40CFFF;}
100% {color:#61FF4D;}
}
@keyframes flashycolor1 {
0% {color:#EF56FC;}
25% {color:#FF4D4D;}
50% {color:#FFF94D;}
75% {color:#40CFFF;}
100% {color:#61FF4D;}
}
@-webkit-keyframes flashycolor2 {
0% {color:#61FF4D;}
25% {color:#EF56FC;}
50% {color:#FF4D4D;}
75% {color:#FFF94D;}
100% {color:#40CFFF;}
}
@keyframes flashycolor2 {
0% {color:#61FF4D;}
25% {color:#EF56FC;}
50% {color:#FF4D4D;}
75% {color:#FFF94D;}
100% {color:#40CFFF;}
}
@-webkit-keyframes flashycolor3 {
0% {color:#40CFFF;}
25% {color:#61FF4D;}
50% {color:#EF56FC;}
75% {color:#FF4D4D;}
100% {color:#FFF94D;}
}
@keyframes flashycolor3 {
0% {color:#40CFFF;}
25% {color:#61FF4D;}
50% {color:#EF56FC;}
75% {color:#FF4D4D;}
100% {color:#FFF94D;}
}
@-webkit-keyframes flashycolor4 {
0% {color:#FFF94D;}
25% {color:#40CFFF;}
50% {color:#61FF4D;}
75% {color:#EF56FC;}
100% {color:#FF4D4D;}
}
@keyframes flashycolor4 {
0% {color:#FFF94D;}
25% {color:#40CFFF;}
50% {color:#61FF4D;}
75% {color:#EF56FC;}
100% {color:#FF4D4D;}
}
.color-0, .color-1, .color-10 {
-webkit-animation-name: flashycolor;
animation-name: flashycolor;
-webkit-animation-duration: 20s;
animation-duration: 2s;
-webkit-animation-timing-function: linear;
animation-timing-function: linear;
-webkit-animation-delay: 0.5s;
animation-delay: 0.5s;
}
.color-2, .color-11 {
-webkit-animation-name: flashycolor1;
animation-name: flashycolor1;
-webkit-animation-duration: 20s;
animation-duration: 2s;
-webkit-animation-timing-function: linear;
animation-timing-function: linear;
-webkit-animation-delay: 0.5s;
animation-delay: 0.5s;
}
.color-3, .color-12 {
-webkit-animation-name: flashycolor2;
animation-name: flashycolor2;
-webkit-animation-duration: 20s;
animation-duration: 2s;
-webkit-animation-timing-function: linear;
animation-timing-function: linear;
-webkit-animation-delay: 0.5s;
animation-delay: 0.5s;
}
.color-4 {
-webkit-animation-name: flashycolor3;
animation-name: flashycolor3;
-webkit-animation-duration: 20s;
animation-duration: 2s;
-webkit-animation-timing-function: linear;
animation-timing-function: linear;
-webkit-animation-delay: 0.5s;
animation-delay: 0.5s;
}
.color-6 {
-webkit-animation-name: flashycolor4;
animation-name: flashycolor4;
-webkit-animation-duration: 20s;
animation-duration: 2s;
-webkit-animation-timing-function: linear;
animation-timing-function: linear;
-webkit-animation-delay: 0.5s;
animation-delay: 0.5s;
}
.color-5 {
-webkit-animation-name: flashycolor;
animation-name: flashycolor;
-webkit-animation-duration: 20s;
animation-duration: 2s;
-webkit-animation-timing-function: linear;
animation-timing-function: linear;
-webkit-animation-delay: 0.5s;
animation-delay: 0.5s;
}
.color-7 {
-webkit-animation-name: flashycolor1;
animation-name: flashycolor1;
-webkit-animation-duration: 20s;
animation-duration: 2s;
-webkit-animation-timing-function: linear;
animation-timing-function: linear;
-webkit-animation-delay: 0.5s;
animation-delay: 0.5s;
}
.color-8 {
-webkit-animation-name: flashycolor2;
animation-name: flashycolor2;
-webkit-animation-duration: 20s;
animation-duration: 2s;
-webkit-animation-timing-function: linear;
animation-timing-function: linear;
-webkit-animation-delay: 0.5s;
animation-delay: 0.5s;
}
.color-9 {
-webkit-animation-name: flashycolor3;
animation-name: flashycolor3;
-webkit-animation-duration: 20s;
animation-duration: 2s;
-webkit-animation-timing-function: linear;
animation-timing-function: linear;
-webkit-animation-delay: 0.5s;
animation-delay: 0.5s;
}
.fly-in-text li {
font-size: 36px;
transform: translate(0, 250px);
margin-right: 10px;
}
1 answers
solution1
0 2020-05-24 19:30:04
Your for loop isn't infinite. It has 0 iterations because h = 0 is always smaller than 2 .
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.
Related Question
jQuery better way for my colors app?
is there a way to make an infinite while loop run in the background?
Is there a way I can use a loop to make a 'forever' kind of statement?
Stuck in a not so infinite loop?
Why is Text blinking in my style?
Better way to do a loop in my Jquery plugin?
jQuery: Infinite loop alternate between 2 img src
I was trying to implement useState hook in plain JavaScript to see its working. Below is my code, but it is not working and goes into infinite loop
is there any way to make my jquery search better?
Infinite loop when trying to make Angularjs display a promise
Related Tags