CODEWITHSUNDEEP
jqueryhtmlcss
Hazel
Hazel

Reputation: 73

Color transitions animation in jquery

How to animate between colors using jQuery, i.e. to fade out one color and fade in another.

I know this can be done with CSS3 keyframes, but that doesn't work in Internet Explorer as mentioned by w3schools. I want a standard method that can work in all browsers.

On search in stackoverflow, it mentioned that a jQuery color plugin is required. Does anyone know about any simpler method for doing it?

Upvotes: 0

Views: 13308

Answers (2)

ATOzTOA
ATOzTOA

Reputation: 35950

You can try this: Live Demo

CSS

#content {
    width: 100%; 
    background: #eff6f4;
    transition: background 4s linear;
    -webkit-transition: background 4s linear;
    -moz-transition: background 4s linear;
}

JQuery

$('#content').css('background', '#C89CBD');

This will change the background color in 4 seconds.

Update

If you need IE, then you can have something like this:

$('#content').fadeOut(500, function(){
    $(this).css('background', bg).fadeIn(2000);
});

It won't be that good, but works. Live Demo

Upvotes: 10

Dennis
Dennis

Reputation: 32598

The color plugin is as simple as it gets, I'm not sure what you imagine could be simpler. All you need to do is include another script:

<script src="jquery.color.min.js"></script>

then animate the color:

  $(foo).animate({
      backgroundColor: "#00FF00"
  }, 1000 );

Upvotes: 1

Related Questions