Question

我尝试使用CSS和javascript来淡入和淡出使用多个按钮的div的不同颜色，我得到了代码在codepen中工作但是当我尝试在网站上使用它时它没有＆＃39工作，我不知道为什么，代码如下：

＆＃13;

$('.btn').on('click', function() {
  var valColor = $(this).val();

  $('.change').css({
    background: valColor
  });
});

＆＃13;

.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;
}

＆＃13;

<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>

＆＃13;

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

Answer 1

在<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>

Answer 2

如前所述，您必须在脚本中添加jquery：

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

除此之外，您可能希望添加不带前缀的转换字段并明确指定颜色：

transition: background-color .6s ease;

如何淡入和淡出div的颜色变化？

2 个答案: