Question

我正在尝试淡入/淡出元素的背景色。

背景颜色是不同的CSS渐变。

我尝试使用CSS过渡和一些jquery来实现此目的，但它不会淡入/淡出。

如果我使用简单的背景：#fff;例如，它可以正常工作，并且可以淡入/淡出，但是当我使用渐变色时，它将停止工作。

这是我到目前为止所拥有的：

$('.box').on('click', function(event){
  $(this).toggleClass('highlighted');
})

body {
  background-color:gray;
}

.box {
  
/* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#18f924+0,036b02+100 */
background: rgb(24,249,36); /* Old browsers */
background: -moz-linear-gradient(top, rgba(24,249,36,1) 0%, rgba(3,107,2,1) 100%); /* FF3.6-15 */
background: -webkit-linear-gradient(top, rgba(24,249,36,1) 0%,rgba(3,107,2,1) 100%); /* Chrome10-25,Safari5.1-6 */
background: linear-gradient(to bottom, rgba(24,249,36,1) 0%,rgba(3,107,2,1) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#18f924', endColorstr='#036b02',GradientType=0 ); /* IE6-9 */
  
  -webkit-transition: background 0.5s linear;
  -moz-transition: background 0.5s linear;
  -ms-transition: background 0.5s linear;
  -o-transition: background 0.5s linear;
  transition: background 0.5s linear;
  width:200px;
  height:200px;
}

.box.highlighted {
/* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#ff3019+0,cf0404+100;Red+3D */
background: rgb(255,48,25); /* Old browsers */
background: -moz-linear-gradient(top, rgba(255,48,25,1) 0%, rgba(207,4,4,1) 100%); /* FF3.6-15 */
background: -webkit-linear-gradient(top, rgba(255,48,25,1) 0%,rgba(207,4,4,1) 100%); /* Chrome10-25,Safari5.1-6 */
background: linear-gradient(to bottom, rgba(255,48,25,1) 0%,rgba(207,4,4,1) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ff3019', endColorstr='#cf0404',GradientType=0 ); /* IE6-9 */
  
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>


<div class="box"></div>

在没有这样的渐变的情况下，它可以正常工作：

$('.box').on('click', function(event){
  $(this).toggleClass('highlighted');
})

body {
  background-color:gray;
}

.box {

background: rgb(24,249,36); 

  
  -webkit-transition: background 0.5s linear;
  -moz-transition: background 0.5s linear;
  -ms-transition: background 0.5s linear;
  -o-transition: background 0.5s linear;
  transition: background 0.5s linear;
  width:200px;
  height:200px;
}

.box.highlighted {

background: rgb(255,48,25);

  
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div class="box"></div>

有人可以请教这个问题吗？

背景gradeint之间的转换？

0 个答案: