jsのanimateが実行されない
ユーザーに最初の色と最後の色とその色を変化させる時間を決めてもらいjavascripのanimateで実行しようと思ったのですが、エラーなしで実行されません。
背景色を変化させるにはどうすればいいでしょうか
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>study</title>
<link rel="stylesheet" href="style/style.css">
<!-- links -->
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Dancing+Script:wght@400;700&display=swap" rel="stylesheet">
</head>
<body id="body">
<div class="all">
<!-- color -->
<h1 class="title dancing first-title">color</h1>
<p class="color-txt txt-one">start color</p>
<select name="color-one" id="color-one" class="color-choice">
<option value="#ff0000">red</option>
<option value="#ff6347">tomato</option>
<option value="#ffa500">orange</option>
<option value="#ffff00">yellow</option>
<option value="#008000">green</option>
<option value="#adff2f">yellowgreen</option>
<option value="#0000ff">blue</option>
<option value="#4169e1">royalblue</option>
<option value="#800080">purple</option>
<option value="#ffc0cb">pink</option>
<option value="#ff1493">deeppink</option>
<option value="#a52a2a">brown</option>
<option value="#808080">gray</option>
<option value="#000000" selected>black</option>
<option value="#ffffff">white</option>
</select>
<p class="color-txt txt-two">end color</p>
<select name="color-two" id="color-two" class="color-choice">
<option value="#ff0000">red</option>
<option value="#ff6347">tomato</option>
<option value="#ffa500">orange</option>
<option value="#ffff00">yellow</option>
<option value="#008000">green</option>
<option value="#adff2f">yellowgreen</option>
<option value="#0000ff">blue</option>
<option value="#4169e1">royalblue</option>
<option value="#800080">purple</option>
<option value="#ffc0cb">pink</option>
<option value="#ff1493">deeppink</option>
<option value="#a52a2a">brown</option>
<option value="#808080">gray</option>
<option value="#000000">black</option>
<option value="#ffffff" selected>white</option>
</select>
<!-- time -->
<h1 class="title dancing second-title">time</h1>
<select name="time" id="time" class="time-choice">
<option value="300000">5minutes</option>
<option value="600000">10minutes</option>
<option value="1800000">30minutes</option>
<option value="3600000">60minutes</option>
<option value="7200000">120minutes</option>
</select><br>
<span>OK</span>
</div>
<!-- scripts -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script src="script/script.js"></script>
</body>
</html>
css
@charset 'utf-8';
body{
padding: 0;
margin: 0;
text-align: center;
}
.dancing{
font-family: 'Dancing Script', cursive;
}
.all{
position: absolute;
top: 50%;
transform: translate(-50%, -50%);
left: 50%;
}
select{
text-align: center;
}
.title{
margin: 0;
text-align: center;
}
.title p{
margin: 0;
display: inline-block;
}
.first-title{
background: linear-gradient(0deg,#264653,#2a9d8f,#e9c46a,#f4a261,#e76f51);
background: -webkit-linear-gradient(0deg,#264653,#2a9d8f,#e9c46a,#f4a261,#e76f51);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
padding-left: 1px;
}
.second-title{
background: linear-gradient(0deg,#ef476f,#ffd166,#06d6a0,#118ab2);
background: -webkit-linear-gradient(0deg,#ef476f,#ffd166,#06d6a0,#118ab2);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
}
.color-txt{
margin: 0;
}
span{
display: inline-block;
margin-top: 50px;
color: white;
background: linear-gradient(90deg,#F7CD39,#67BFD5);
padding: 4px 25px;
border-radius: 15px;
cursor: pointer;
border: gray 2px solid;
}
#time{
margin-top: 10px;
}
.h2{
background: linear-gradient(0deg,#264653,#2a9d8f,#e9c46a,#f4a261,#e76f51);
background: -webkit-linear-gradient(0deg,#264653,#2a9d8f,#e9c46a,#f4a261,#e76f51);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
}
/* PC */
@media (min-width:1000px){
.title{
font-size: 10rem;
}
.color-txt{
font-size: 2rem;
}
.txt-one{
margin-bottom: 20px;
}
.txt-two{
margin: 20px 0;
}
}
/* pad */
@media (min-width:421px) and (max-width:999px){
.title{
font-size: 10rem;
}
.color-txt{
font-size: 2rem;
}
select{
height: 24px;
width: 114px;
font-size: 16.7px;
}
.txt-one{
margin-bottom: 25px;
}
.txt-two{
margin: 24px 0;
}
}
/* mobile */
@media (max-width:420px){
.title{
font-size: 7.5rem;
}
.color-txt{
font-size: 1.75rem;
}
.txt-one{
margin-bottom: 12px;
}
.txt-two{
margin: 10px 0;
}
#time{
margin-top: 15px;
}
}
$(function(){
$('span').click(function(){
let start_color = document.getElementById('color-one').value;
let end_color = document.getElementById('color-two').value;
let time = document.getElementById('time');
$("body").animate({
background:[`${start_color}`, `${end_color}`],
},{
iterations: Infinity,
duration: parseInt(time)
});
})
})
0
