Jquery淡化div颜色变化

Question

我试图让一个div在3secs后改变颜色，白色和黑色之间的过渡是淡化。

.score {
width: 40px;
background-color: #2d2c2c;
border: 4px #2d2c2c solid;
}

setTimeout(function() {
     $('.score')
.css('background-color', '')
.css('background-color', '#2d2c2c');   
.css('border', '4px #2d2c2c solid');    
}, 3000);

https://jsfiddle.net/ohzc7c0c/2/

Answer 1

您可以使用css3过渡

＆＃13;

＆＃13;

setTimeout(function() {
  $('.score')
    .css('background-color', '')
    .css('background-color', '#2d2c2c').css('border', '4px #2d2c2c solid');
}, 1000);

＆＃13;

.score {
  width: 40px;
  background-color: #FFF;
  border: 4px #FFF solid;
  transition: all 2s;
}
body {
  background-color: #d9d9d9;
}

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

但如果您不想使用css3动画，那么

＆＃13;

＆＃13;

setTimeout(function() {
  console.log('x')
  $('.score').css('border', '4px #2d2c2c solid')
  .animate({
    backgroundColor: '#2d2c2c'
  });
}, 1000);

＆＃13;

.score {
  width: 40px;
  background-color: #FFF;
  border: 4px #FFF solid;
}
body {
  background-color: #d9d9d9;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="https://code.jquery.com/color/jquery.color-2.1.2.js"></script>
<div class="score">sc</div>

＆＃13;

＆＃13;

＆＃13;