gpt4 book ai didi

javascript - 我如何淡入和淡出 div 的颜色变化?

转载 作者:行者123 更新时间:2023-11-28 14:59:07 24 4
gpt4 key购买 nike

我正在尝试使用 CSS 和 javascript 为使用多个按钮的 div 淡入和淡出不同的颜色,并且我得到了可以在 codepen 中使用的代码,但是当我尝试在网站上使用它时,它不起作用并且不知道为什么,代码如下:

$('.btn').on('click', function() {
var valColor = $(this).val();

$('.change').css({
background: valColor
});
});
.change {
-webkit-transition: .6s ease;
-moz-transition: .6s ease;
-ms-transition: .6s ease;
-o-transition: .6s ease;
background-color: rgb(25, 65, 196);
height: 15px;
width: 15px;
background-color: rgb(25, 65, 196);
border-radius: 50%;
display: inline-block;
}
<div class="change">
</div>
</br>
<button value="rgb(31, 221, 97)" class="black btn">On</button>
<button value="rgb(221, 56, 30)" class="red btn">Off</button>

就像我说的那样它在 codepen 中工作但是当我导出它并尝试在 HTML 文档中使用它时它没有工作,我不知道问题是什么,如果它很明显,我很抱歉。

最佳答案

<head> 中将 Jquery 脚本添加到您的元素中

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

这里是关于 Jquery 的学习:https://www.w3schools.com/Jquery/default.asp

$('.btn').on('click', function() {
var valColor = $(this).val();

$('.change').css({
background: valColor
});
});
.change{
-webkit-transition: .6s ease;
-moz-transition: .6s ease;
-ms-transition: .6s ease;
-o-transition: .6s ease;
background-color:rgb(25, 65, 196);
height: 15px;
width: 15px;
background-color: rgb(25, 65, 196);
border-radius: 50%;
display: inline-block;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="change">
</div>
</br>
<button value="rgb(31, 221, 97)" class="black btn">On</button>
<button value="rgb(221, 56, 30)" class="red btn">Off</button>

关于javascript - 我如何淡入和淡出 div 的颜色变化?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/50551470/

24 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com