CODEWITHSUNDEEP
javascriptjquerycss
user2252219
user2252219

Reputation: 865

Jquery fade div color change

I'm trying to get a div to change colors after 3secs and the transition between the white and black to be a fade.

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

Upvotes: 0

Views: 436

Answers (1)

Arun P Johny
Arun P Johny

Reputation: 388436

You can use css3 transition

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>

But if you don't want to use css3 animations then

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>

Upvotes: 2

Related Questions