衝突淡化

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/