我有一个展开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函数不会被第二次调用,并且颜色不会反转。有什么方法可以解决这个问题吗?非常感谢任何帮助。
答案 0 :(得分:0)
我发现您已经在使用jQuery了,您可以通过附加 jQuery UI 来执行此操作,以便您可以使用其 jQuery animate 功能。我认为没有办法用普通的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);
&#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;