反転色ごとに30秒

Question

私はここで見ることができdivsを拡大すると、アニメーション、持っている：30秒の終わりであれば、https://rimildeyjsr.github.io/spotify-circle-animation/

私は色ごとに30秒を変更する、すなわち、円は濃い青色で、次に明るい青色に変化し、逆も同様です。拡張divアニメーションは無限に実行され続けます。

CSS：

.initial-div { 
    width: 1000px; 
    height: 1000px; 
    transform: scale(0); 
} 

.position-div{ 
    position: absolute; 
    border-radius: 50%; 
    display: none; 
} 

.animate { 
    -webkit-animation: expand 2500s; 
} 

@-webkit-keyframes expand { 
    0%{ 
     -webkit-transform: scale(0,0); 
    } 

    100%{ 
     -webkit-transform: scale(100.0,100.0); 
     display: none; 
    } 
} 

のjQuery：これは私がこれまで持っているものである

var animationEnd = 'webkitAnimationEnd mozAnimationEnd MSAnimationEnd oanimationend animationend'; 

     function makeDiv(divColor){ 
      var divsize = 1000; 
      //$('body').css({'background-color':bgColor}); 
      console.log(1); 
      $newdiv = $('<div/>').addClass('initial-div').css({ 
       'background-color': divColor 
      }); 

      var posx = (Math.random() * ($(document).width()) - (divsize/2)).toFixed(); 
      var posy = (Math.random() * ($(document).height()) - (divsize/2)).toFixed(); 

      $newdiv.addClass('position-div').css({ 
       'left':posx+'px', 
       'top':posy+'px' 
      }).appendTo('body').addClass('animate').css({'display':'block'}).one(animationEnd,function(){ 
       $(this).remove(); 
      }); 
     } 

$(document).ready(function(){ 
     var flag=0; 
      function changeColors(){ 
       console.log(2); 
       setInterval(change(),30000); 
      } 

      function change(){ 
       console.log(3); 
       if (flag == 0){ 
        console.log(31); 
        color='#11256c'; 
        flag=1; 
       } 
       else { 
        console.log(32); 
        color='#24ccdf'; 
        flag=0; 
       } 
       setInterval(function(){makeDiv(color)},2000); 
      } 
      changeColors(); 

     }); 

makeDiv関数はのsetInterval関数は変更を呼び出し、無限に実行されているので（）のdoesnもう一度呼び出され、色は反転しません。この問題を解決する方法はありますか？どんな助けでも大歓迎です。

Answer 1

私はあなたが既にjQueryのを使用していますが、そのjQuery animate機能を使用することができるように、あなたはjQuery UIを取り付けることにより、これを行うことができていることがわかります。私は、プレーンなjQuery機能でオブジェクトの色を更新する方法はないと思います。

サークルに背景のプロパティをアニメーション化させるには、間隔を3000から30000ミリ秒に設定する必要があります。

var indexNumber = 0; 
 

 
function colorChange() { 
 
    var colors = ["#FF1493", "#DC143C", "#7FFF00", "#FF69B4"]; 
 
    $('.circle').animate({ 
 
     'background-color': colors[indexNumber] 
 
    }, 3000); 
 
} 
 

 
setInterval(function() { 
 
    colorChange() 
 
    indexNumber++ 
 
    if (indexNumber == 4) { 
 
     indexNumber = 0 
 
    } 
 
}, 1000);

.circle { 
 
    width: 5rem; 
 
    height: 5rem; 
 
    border-radius: 100%; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.2/jquery.min.js"></script> 
 
<script src="https://code.jquery.com/ui/1.10.1/jquery-ui.min.js"></script> 
 

 
<div class="circle"></div> 
 
<div class="circle"></div>