2017-10-18 65 views
1

自变化的背景我想改变的背景下使用自动循环如何创建jQuery的

我试图创建一个包含我最喜欢的颜色代码数组,并通过指数

<!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> 
打电话给他们

告诉我我做错了什么

回答

1

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

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

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

你需要包括jQuery的用户界面,以及为实现这一

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>

+0

它不工作-_-对不起伙计。 –

+0

检查它正在为我工​​作的代码片段 –

+0

你面临的问题是什么? –