Konflikt zwischen CSS Übergang Dauer und jQuery verblassen

Question

Bitte sehen: https://jsfiddle.net/nsx6nvs5/

HTML:

<div id="btn"></div> 

CSS:

#btn { 
     height: 100px; 
     background-color: red; 
     transition-duration:1s; 
    } 

     #btn:hover { 
      background-color: green; 
     } 

Script:

$(document).ready(function() { 
    $("#btn").click(function() { 
     $("#btn").fadeOut(2000); 
     setTimeout(function() { 
      $("#btn").fadeIn(2000); 
     }, 3000); 
    }); 
}); 

Fade nicht funktionieren korrekt. Warum verblassen und die Übergangsdauer haben Konflikt?

Hinweis: Click-Ereignis ist kein Problem. In anderen Fällen haben sie auch Konflikte!

Ich suchte und fand, dass es bereits in anderen Szenario gefragt, aber überhaupt nicht beantwortet.

Conflict between CSS transition and jQuery fade

Answer 1

Trying, diese zu Ihrem #btn CSS:

transition-property: background-color; 

See Fiddle: https://jsfiddle.net/apeazzoni/nsx6nvs5/18/