JQuery fade div изменение цвета

Question

Я пытаюсь получить div, чтобы менять цвета после 3 секунд и переход между белым и черным, чтобы быть затухающим.

.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

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

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

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

---

Но если вы не хотите использовать CSS3 анимации затем

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

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

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