Invert Farben expandierenden Kreisen alle 30 Sekunden

Question

Ich habe eine Animation mit divs erweitert, die hier zu sehen sind: https://rimildeyjsr.github.io/spotify-circle-animation/

Ich möchte alle 30 Sekunden die Farben ändern, das heißt, wenn am Ende von 30 Sekunden, die Kreise sind dunkelblau, um dann zu hellblau zu wechseln und umgekehrt. Die expandierende Divs-Animation läuft unendlich weiter.

Dies ist, was ich bisher:

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(); 

     }); 

Da die makeDiv Funktion unendlich läuft, die setInterval Funktionsänderung() aufgerufen wird doesn werde nicht ein zweites Mal gerufen und die Farben werden nicht invertiert. Gibt es eine Möglichkeit, dieses Problem zu beheben? Jede Hilfe wird sehr geschätzt.

Answer 1

Ich sehe, dass Sie bereits jQuery verwenden, können Sie dies tun, indem jQuery UI so angebracht, dass Sie seine jQuery animate Funktionen nutzen können. Ich denke, dass es keine Möglichkeit gibt, die Farbe eines Objekts mit einfacher jQuery-Funktionalität zu aktualisieren.

Damit Sie diese Kreise ihre Hintergrundeigenschaft animieren können, müssen Sie das Intervall von 3000 auf 30000 ms setzen.

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>