How to change text color in different fragments

Question

Say I have a simple reveal.js slide like this:

 <section>
   <h1>Title</h1>
   <p >Text</p>
   <p class="fragment">Fragment</p>
 </section>

I'd like to change Text colour to red after Fragment appears on screen. How should I do it?

Answer 1

It's not rather simple:

<section>
  <h1>Title</h1>
  <p id="postfragment">Text</p>
  <p class="fragment">Fragment</p>
</section>
...
<script>
Reveal.addEventListener('fragmentshown', function(event) {
   document.getElementById("postfragment").style.color="red"; 
});
</script>

Answer 2

You could simply do

<section>
  <h1>Title</h1>
  <p class="fragment highlight-red" data-fragment-index="1" >Text</p>
  <p class="fragment data-fragment-index="1"">Fragment</p>
</section>

That way, the red text and the "Fragment" text will always be in sync.

Answer 3

For those who want the highlight to actually appear after (rather than at the same time):

<section>
    <h1>Title</h1>
    <span class="fragment fade-in" data-fragment-index="1">
        <p class="fragment highlight-red" data-fragment-index="3">Text</p>
    </span>
    <p class="fragment" data-fragment-index="2">Fragment</p>
</section>

Answer 4

Here is a sample of how to do it with red blue and green

<p>Highlight <span class="fragment highlight-red">red</span> <span class="fragment highlight-blue">blue</span> <span class="fragment highlight-green">green</span></p>