Text color with fading over time effect

问题

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>");

回答1:

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

回答2:

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

回答3:

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.

回答4:

(couldnt format code in comment, 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>

来源：https://stackoverflow.com/questions/18748241/text-color-with-fading-over-time-effect

标签

javascript

jquery

css