Check out this link: https://jsfiddle.net/nsx6nvs5/
Here is the HTML code:
<div id="btn"></div>
This is the corresponding CSS:
#btn {
height: 100px;
background-color: red;
transition-duration:1s;
}
#btn:hover {
background-color: green;
}
And finally, we have the script:
$(document).ready(function () {
$("#btn").click(function () {
$("#btn").fadeOut(2000);
setTimeout(function () {
$("#btn").fadeIn(2000);
}, 3000);
});
});
There seems to be an issue with the fading effect. Why does fade conflict with transition-duration?
Note: The click event is not the problem. It occurs with other events as well!
I have researched this and it seems like this question has been asked before in a different scenario but remains unanswered.
Conflict between CSS transition and jQuery fade