Question

我想使用循环

自动更改背景

我尝试创建一个包含我最喜欢的颜色代码的数组，并通过索引

调用它们

<!DOCTYPE html>
<html>
<head>
    <title>Happy Diwali</title>
    <link href="Index.css" rel="stylesheet">
    <link href="greeting.css" rel="stylesheet">
    <script src="greeting.js"></script>
    <script src = "https://cdnjs.cloudflare.com/ajax/libs/react/16.0.0/umd/react.production.min.js"></script>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>

</head>
<body>
    <div style="height: 700px; width: 100%; border-radius: 4%; background-color: gray;animation-name: magic;animation-iteration-count: infinite;animation-duration: 4s;"></div>
    <script>
    var a = ["#116bc4", "#e5109b", "#bfab12", "#000000"];

    $(document).ready(function () {

        var i;
        for (i = 0; i < 4; i = i + 1)
        $('div').animate({background-color : a[i]} , 2000); 
    });
    </script>
    </body>
</html>

告诉我我做错了什么

Answer 1

你需要包含jquery ui来实现这个目标

var a = ["#116bc4", "#e5109b", "#bfab12", "#000000"];

$(document).ready(function () {
    var i;
    for (i = 0; i < 4; i++)
    {
        $('div').animate({backgroundColor : a[i]} , 2000); 
    }
});

<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<div style="height:200px;width:200px">
</div>

Answer 2

一种简单的方法是使用CSS关键帧。

@keyframes bg-animation {
    0% {
       background: #116bc4;
    }
    25% {
       background: #e5109b;
    } 
    50% {
       background: #bfab12;
    } 
    75% {
       background: #000000;
    } 
 }

.div {
   animation: bg-animation 5s infinite linear alternate;
}

如何在jquery中创建自我更改的背景

2 个答案: