css3 - jQuery - when btn is clicked on form with empty fields, the background color and text fade in -

see fiddle

css

    .fade-in{   background-color: #ff9696;   -webkit-transition: background 0.5s linear;   -moz-transition: background 0.5s linear;   -ms-transition: background 0.5s linear;   -o-transition: background 0.5s linear;   transition: background 0.5s linear;     opacity: 1; }  .alerterror{   background-color: #ff9696;   color: red;   padding: 15px 0;   opacity: 0; } 

jquery

$('.box-button').click(function() {     $('.alerterror').fadein('slow', function() {        $(".alerterror").addclass('fade-in');    });   }); 

html

    <div class ="alerterror">missing fields</div> <button class="box-button">                 example  </button> 

trying ages fade in background color , error text when form button submitted empty fields. no avail. have feeling css or jquery might not right or working.

any appreciated.

fiddle demo

just change position of css classes

.alerterror { /* move class first */     background-color: #ff9696;     color: red;     padding: 15px 0;     opacity: 0; } .fade-in {     background-color: #ff9696;     -webkit-transition: background 0.5s linear;     -moz-transition: background 0.5s linear;     -ms-transition: background 0.5s linear;     -o-transition: background 0.5s linear;     transition: background 0.5s linear;     opacity: 1; } 

problem

opacity property overridden alerterror class