CODEWITHSUNDEEP
jquerycsscss-transitionsfade
Ali Mottaghi Pour
Ali Mottaghi Pour

Reputation: 297

Conflict between CSS transition-duration and jQuery fade

Please see: https://jsfiddle.net/nsx6nvs5/

HTML:

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

CSS:

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

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

Script:

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

Fade not work correctly. Why fade and transition-duration have Conflict?

Note: Click event is not issue. In other events they have conflict too!

I searched and found that it asked already in other scenario but not answered as well at all.

Conflict between CSS transition and jQuery fade

Upvotes: 1

Views: 147

Answers (1)

Aaron_Peazzoni
Aaron_Peazzoni

Reputation: 11

Trying adding this to your #btn CSS: 

 transition-property: background-color;

See Fiddle: https://jsfiddle.net/apeazzoni/nsx6nvs5/18/

Upvotes: 1

Related Questions