Smooth color change in js

Question

I have this line of code, which after some event changes color:

$('li', this).css('color', '#fff');

How to modify it to change colour smoothly, so it takes eg 1 second to fade between the original color and #fff ?

I know it's very easy, but i haven't done it for a while and forgot. thanks

jsfiddle: HERE

does it need to fade back after mouseleave? See this: [http://stackoverflow.com/questions/8742249/how-to-set-css3-transition-using-javascript](http://stackoverflow.com/questions/8742249/how-to-set-css3-transition-using-javascript) — MilkyTech, May 31 '14 at 15:04

score 2 · Answer 1 · answered May 31 '14 at 15:01

2

You could use CSS transition:

li
{
 color: #000;
 transition: color 1s ease;
}

answered May 31 '14 at 15:01

DorkyMork

66
4

good and simple, may use this one or the one from DanielLisik. thanks :) – Piotr Ciszewski May 31 '14 at 15:38

score 2 · Answer 2 · answered Apr 30 '19 at 21:23

2

If you want to do it from your js:

document.getElementById("myDIV").style.transition = "all 2s";

Or you can just add it to your CSS:

#mydiv {
     transition: all 2s;
}

answered Apr 30 '19 at 21:23

Valery Kovalev

331
2
6

1

Thanks, you're the only person who actually answered the question. Did this not exist before?? – clark-fischer Aug 24 '21 at 16:18
Glad that you find it useful! – Valery Kovalev Aug 26 '21 at 11:07

score 1 · Accepted Answer · answered May 31 '14 at 15:01

Solution without any additional plugins

1. Add this CSS:

nav li {
   -webkit-transition:color 1s ease;
   -moz-transition:color 1s ease;
   -o-transition:color 1s ease;
   transition:color 1s ease;
}

.white_color { color:#fff; }

You can modify 1s to whatever time value you want, you can also use ms if you like.

2. Use this jQuery code:

$(document).ready(function () {
    $("nav a").mouseenter(function () {
        if ($(this).data('fading')) //EXIT IF WE ARE FADING
        return;
        $('div', this).stop(true, false).animate({
            'height': '45px'
        }, 100);
        $('li', this).addClass('white_color'); // THIS IS THE LINE I'M AFTER - I want the color to change smoothly, not instantly
        $('li', this).stop(true, false).animate({
            'padding-top': '15px'
        }, 200);
    }).mouseleave(function () {
        if ($(this).data('fading')) return;
        $('li', this).removeClass('white_color');
        $('div', this).stop(true, false).animate({
            'height': '0px'
        }, 300);

        $('li', this).stop(true, false).animate({
            'padding-top': '65px'
        }, 500);
    });

});

jsFiddle demo.

Awesome. No problem! :) – display-name-is-missing May 31 '14 at 17:09 — display-name-is-missing, May 31 '14 at 17:09

score 0 · Answer 4 · answered May 31 '14 at 15:11

0

jQuery UI comes with a color plugin which allows you to animate colors.

$('li', this).animate({
    color: "#fff"
}, 1000);

answered May 31 '14 at 15:11

Duncan

954
3
15
23

didn't work for some reason. I've replaced the line, but I've got the answer, although thank you for your help and time. – Piotr Ciszewski May 31 '14 at 15:41

Smooth color change in js

4 Answers4

Solution without any additional plugins

You can modify 1s to whatever time value you want, you can also use ms if you like.