CSS过渡持续时间和jQuery淡出之间的冲突

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);
     });
});

淡出不能正常工作。为什么渐变和过渡持续时间有冲突?

备注: Click event is not issue。在其他事件中，他们也有冲突!

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

CSS transition与jQuery fade冲突

Answer 1

尝试添加到你的#btn CSS:

 transition-property: background-color;

参见:https://jsfiddle.net/apeazzoni/nsx6nvs5/18/