CSS transition-duration和jQuery fade之间的冲突

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/