Is there any way i can do fading/decay color effect on html text by javascript or css?

right now i read from database and append the text to a div, the text initially would be blue color and it will decay to black color over certain amount of time (like 5 secs).

right now i just appending text to div with

$('#txtBox1').append("#"+ data.message[i]+ "</br>");

Is there any way i can do fading/decay color effect on html text by javascript or css?

right now i read from database and append the text to a div, the text initially would be blue color and it will decay to black color over certain amount of time (like 5 secs).

right now i just appending text to div with

$('#txtBox1').append("#"+ data.message[i]+ "</br>");

• javascript
• jquery
• css

• 1 You would need to use jQuery UI to animate color, or you can use some jQuery color plugin. – Jashwant Commented Sep 11, 2013 at 18:07
• 2 Google CSS animations – Itay Commented Sep 11, 2013 at 18:09
• Just set the initial class that has transition: all 5 ease, then set it to another class using jQuery that has a black color. – user1508519 Commented Sep 11, 2013 at 18:10
• @remyabel You're right but it's more easily done with CSS animations – Itay Commented Sep 11, 2013 at 18:12

4 Answers 4

Can be easily done with CSS animations.

Here's an example.

jsFiddle Demo

.fading {
    -webkit-animation-duration: 1s;
    -webkit-animation-name: fading;
    animation-duration: 1s;
    animation-name: fading;
}
@-webkit-keyframes fading {
    from {
        color: blue;
    }
    to {
        color: black;
    }
}
@keyframes fading {
    from {
        color: blue;
    }
    to {
        color: black;
    }
}

Most browser already support CSS transitions:

#txtBox1 {
    color:blue;
    -webkit-transition:color 5s;
    transition:color 5s;
}
#txtBox1.black {
    color:black;
}

To start the color effect, you need to add the className black

$('#txtBox1').addClass('black');

Fiddle

On modern browsers, you can use CSS3 transitions, as shown by @RienNeVaPlus

On older browsers, you can add jQuery UI to your project to add animation support for CSS colours. It's possible to obtain a custom jQuery UI build that only contains the essential features without all the rest of the widgets.

(couldnt format code in ment, so posting reply) i tried to modify RienNeVaPlus's code to the following:

$.ajax({...
    success: function(data) {
           for (var i = 0; i < data.message.length; i++) { 
                   txt = "<p id='line"+count+i+"' class='fadingColor'># "+ data.message[i]+ "</p>"
                   $('#txtBox1').append(txt);
                   $('#line'+count+i).addClass('black');
            }
             count = data.count;}

css

.fadingColor {
    color:blue;
    -webkit-transition:color 5s;
    transition:color 5s;
 }
.fadingColor.black {
    color:black;
}

but it always shows black color, from chrome inspect element:

<p id="line050" class="fadingColor black"># Zone 3 Opened</p>