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

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

• javascript
• jquery
• css

• does it need to fade back after mouseleave? See this: http://stackoverflow./questions/8742249/how-to-set-css3-transition-using-javascript – MilkyTech Commented May 31, 2014 at 15:04

4 Answers 4

You could use CSS transition:

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

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;
}

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.

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

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