每30秒反转一次扩展圆圈的颜色

时间:2017-05-15 07:20:26

标签: jquery css

我有一个展开divs的动画,可在此处看到:https://rimildeyjsr.github.io/spotify-circle-animation/

我想每30秒更换一次颜色,即如果在30秒结束时,圆圈为深蓝色,则为蓝色,反之亦然。扩展的divs动画一直无限运行。

这是我到目前为止所做的:

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函数无限运行,所以调用change()的setInterval函数不会被第二次调用,并且颜色不会反转。有什么方法可以解决这个问题吗?非常感谢任何帮助。

1 个答案:

答案 0 :(得分:0)

我发现您已经在使用jQuery了,您可以通过附加 jQuery UI 来执行此操作,以便您可以使用其 jQuery animate 功能。我认为没有办法用普通的jQuery功能更新对象的颜色。

为了让这些圈子为其背景属性设置动画,您需要将时间间隔从3000设置为30000毫秒。

&#13;
&#13;
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);
&#13;
.circle {
  width: 5rem;
  height: 5rem;
  border-radius: 100%;
}
&#13;
<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>
&#13;
&#13;
&#13;