冲突淡化

Question

请参阅：https://jsfiddle.net/nsx6nvs5/

HTML：

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

CSS：

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

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

脚本：

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

淡出无法正常工作正确。为什么淡入淡出和过渡期有冲突？

注意：点击事件不是问题。在其他事件中，他们也有冲突！

我搜索了一下，发现它在其他场景中已经问过，但是根本没有回答。

Conflict between CSS transition and jQuery fade

Answer 1

试图添加以下内容到#btn CSS：

transition-property: background-color; 

见小提琴：https://jsfiddle.net/apeazzoni/nsx6nvs5/18/