堆棧內存溢出
  簡體   English   中英

試圖讓我的文本 colors 永遠交替閃爍，但不使用無限循環，有沒有更好的方法？

[英]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?

 原文  2020-05-24 19:24:42  5   1    javascript/ html/ css

問題描述

我試圖在文本 flash colors 中反復寫幾句話我設置了一個無限循環來包含代碼，但它不起作用，因為時間是 5 秒有人能告訴我我的代碼有什么問題來得到我想要的結果嗎？ 雖然我不認為問題出在我的 html 文件上，但無論如何我還是添加了它，我很確定它與 animation 持續時間有關 提前謝謝

$(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 個解決方案

解決方案1
 0  2020-05-24 19:30:04

你for循環不是無限的。 它有 0 次迭代，因為h = 0總是小於2 。

暫無
暫無

聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.

相關問題 jQuery為我的顏色應用程序提供更好的方法？ 有沒有辦法讓無限循環在后台運行？ 有沒有辦法可以使用循環來做出“永遠”的陳述？ 陷入一個不那么無限的循環？ 為什么文本以我的風格閃爍？ 在我的Jquery插件中執行循環的更好方法？ jQuery：2 img src之間的無限循環交替 我試圖在普通的 JavaScript 中實現 useState 掛鈎以查看其工作。 下面是我的代碼，但它不工作並進入無限循環 有什么辦法可以使我的jquery搜索更好？ 試圖使Angular.js顯示承諾時發生無限循環
相關標簽
 
粵ICP備18138465號  © 2020-2024 STACKOOM.COM