CODEWITHSUNDEEP
htmlcssanimationcolorshover
Moon
Moon

Reputation: 20022

Animate Colour Change transitions

Whenever with css or anything we change colors like backgrounds, color, border color etc. Is there a way we can animate the transition between normal and hover state colors?

What I want to say is the colors, lets say change instantly from white to black. I want the transition stages like all the gray-scale in between white and black. With colors this can be attained by fade effect if one colors fades into another. The in between colors are covered up.

Is there a way to achieve this?

Upvotes: 0

Views: 2761

Answers (4)

Daryl
Daryl

Reputation: 380

This can be done with CSS3, although it's not completely cross-browser as of yet. http://www.the-art-of-web.com/css/css-animation/

a { 
    -webkit-transition: all 1s ease-in-out; // control the animation time via '1s'
    -moz-transition: all 1s ease-in-out; 
    -o-transition: all 1s ease-in-out; 
    color:#ff0000;
}

a:hover { color:#00ff00 }

Alternatively you could use jQuery .animate(); http://api.jquery.com/animate/

        $("#yourdiv").css({
            backgroundColor: #000000 // Original Background color
        }).hover(function() {
            $(this).stop().animate({
                backgroundColor: #ff0000 // Hover State Background color
            }, 350); // animation time
        }, function() {
            $(this).stop().animate({
                backgroundColor: #000000 // Hover out ( back to original )
            }, 350); // animation time
        });

Upvotes: 2

zzzzBov
zzzzBov

Reputation: 179216

is it possible? yes

how is it possible? javascript

X3Maverick has a good answer (out of up-votes, sorry), but you could also try making a timer to adjust the colors accordingly

var interval = 500,
  iteration = 0,
  maxIterations = 10;

setTimeout(doUpdate, interval);

function doUpdate()
{
  //color logic here 'rgb( R, G, B)' or #GHIJKL
  switch (interval)
  {
    case 0:
    ...
  }
  if (iteration < maxIterations) setTimeout(doUpdate, interval);
}

this would allow you to specify exactly what colors you want and in what order. Please only use your powers for good or for awesome. Flashing colors and blinking text cause seizures and are not appreciated.

jQuery now has an official color animation plugin:
http://docs.jquery.com/Release:jQuery_1.2/Effects#Color_Animations

Upvotes: 1

Brian D&#39;Astous
Brian D&#39;Astous

Reputation: 1358

You can't directly animate color using jQuery since "color" is not a numeric CSS property.

But you can do something like this: Let element A be styled to reflect the non-hover state, and let element B be styled to reflect the hover state except with opacity set to 0. Then absolutely position element B directly over element A. Then use the jQuery fadeIn() and fadeOut() methods to change the opacity of element B on hover.

Upvotes: 0

Dave
Dave

Reputation: 4412

Sounds like a job for jQuery - specifically, for the animate() method:

http://api.jquery.com/animate/

Upvotes: 1

Related Questions