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
Share Improve this question asked May 31, 2014 at 14:50 Piotr CiszewskiPiotr Ciszewski 1,8016 gold badges33 silver badges57 bronze badges 1- 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
Reset to default 2You 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);