CODEWITHSUNDEEP
jquerycsscolorsbackgroundtransition
masterdany88
masterdany88

Reputation: 5331

jquery class change color transition

I am trying to make on login form background color (gradient) change using css classess:

.smallWindow-info{
  background-color: #339bb9;
  background-image: -khtml-gradient(linear, left top, left bottom, from(#5bc0de), to(#339bb9));
  background-image: -moz-linear-gradient(top, #5bc0de, #339bb9);
  background-image: -ms-linear-gradient(top, #5bc0de, #339bb9);
  background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #5bc0de), color-stop(100%, #339bb9));
  background-image: -webkit-linear-gradient(top, #5bc0de, #339bb9);
  background-image: -o-linear-gradient(top, #5bc0de, #339bb9);
  background-image: linear-gradient(top, #5bc0de, #339bb9);
  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#5bc0de', endColorstr='#339bb9', GradientType=0);
}
.smallWindow-warning{
  background-color: #eedc94;
  background-image: -khtml-gradient(linear, left top, left bottom, from(#fceec1), to(#eedc94));
  background-image: -moz-linear-gradient(top, #fceec1, #eedc94);
  background-image: -ms-linear-gradient(top, #fceec1, #eedc94);
  background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #fceec1), color-stop(100%, #eedc94));
  background-image: -webkit-linear-gradient(top, #fceec1, #eedc94);
  background-image: -o-linear-gradient(top, #fceec1, #eedc94);
  background-image: linear-gradient(top, #fceec1, #eedc94);
  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#fceec1', endColorstr='#eedc94', GradientType=0);
}

but id doesnt work please help here is code. http://jsfiddle.net/4JFpa/

Upvotes: 0

Views: 509

Answers (2)

Mindaugas Večkys
Mindaugas Večkys

Reputation: 423

You can use css animation. Just change css classes. 

.smallWindow-warning{
background-color: #339bb9;
background-image: linear-gradient(  rgba(255,255,255,0.6),  rgba(0,0,0,0.6) );
box-shadow: 0 0 5px 0 rgba(0, 0, 0, 0.2);
animation: smallWindow-warning 5s forwards;
}

@keyframes smallWindow-warning {
100% {background-color: #eedc94;}
}

Demo

Upvotes: 1

Bhushan Kawadkar
Bhushan Kawadkar

Reputation: 28513

Try this : You need to pass class name (both to remove / add ) in quotes. And remove info class after animation finished, then add warning class and start animation.

API Doc for animate()

$(document).ready(function(){

  $( "#loginPanel").animate({
    opacity: 0
  }, 3000, function() {
      $(this).removeClass('smallWindow-info').addClass('smallWindow-warning').animate({ opacity: 1 }, 3000);
  });
});

Demo

Upvotes: 0

Related Questions