0

Using javascript, I randomly pick a word from a text in an html div tag and surround it with a span tag. Using the class of the span tag I try to perform a CSS transition of the word color from black to red. I then remove the span tag to change the word back to black color. The effect I am looking for are "flashing words".

I manage to get the word to change color, but can not get the smooth CSS transition to work.

My question is: Why isn't the CSS transition working?

My problem seems similar to this question, but I do not manage to get the solution of "forcing a layout" to work in my case.

I hope it is ok to provide a working link to the test code I am working with instead of posting code here (javascript file here). If not, I will of course on request add code to this post.

Thank you in advance! I have been busting my head against this problem for a full day without success. Time to acknowledge that I need help with this one :-)

Edit: Adding code.

HTML:

<div id="message">
Some words here.
</div>

CSS:

div#message span
{
    color: black;
}

div#message span.redtext
{
    transition: color 5s ease-out 0s;
    color: red;
}

Javascript:

//Insert span around word
var newText = text.split(randomWord).join('<span>' + randomWord + '</span>');
$("#message").html(newText);

//Request property that requires layout to force a layout 
var x = $("#message").clientHeight;

//Add class to span
var newText = newText.split('<span>').join('<span class="redtext">');
$("#message").html(newText);
Community
  • 1
  • 1
Fredrik Rafn Strandberg
  • 129
  • 12
  • 1
    why don't you convert each word in the div into a span on `DOMContentLoaded` and then just change the classes of random spans? Also, `$("#message").clientHeight` is `undefined`, you need to `$("#message")[0].clientHeight` – Paul S. Aug 26 '12 at 20:42
  • 1
    Yes, posting your code would be nice because 1. Questions on SO are supposed to hold some meaning to future readers, so in case your server goes down or the file is modified, the question and answers will still make sense in the future; and 2. Without posting code (only links) it looks like someone asking for help fixing an issue in their code in a specific point in time (which may be closed as too localized) - but I see you took the effort to minimize it to a compilable example already. So yeah, post some relative code when asking questions. `=]` – Fabrício Matté Aug 26 '12 at 20:45
  • Thank you for your replies! Your two points make good sense Fabricio, and I will add code to this question and supply code to future questions. – Fredrik Rafn Strandberg Aug 27 '12 at 20:56

2 Answers2

1

Give your span a class so that you can easily get a reference to it using jquery. Then use the addClass and removeClass jquery methods to add and subsequently remove the class that gives the text its colour.

Here's a working example: http://jsfiddle.net/sVMZJ/

Greg Ross
  • 3,321
  • 2
  • 22
  • 24
  • Thank you for your answer! I will definitely use the jquery reference and methods. My problem is however that I can not see any color transition in your jsfiddle, the word instantly turns to red, even if I set the duration to 10 seconds. I am starting to distrust my own eyes here. Tested in newest versions of Opera, Firefox and IE. – Fredrik Rafn Strandberg Aug 27 '12 at 20:44
  • I got it working! Had to correct the forced layout to '$("#message")[0].clientHeight;' as shhac wrote, and move it down after the creation of the span with class 'highlightedWord'. Thanks you for your help! I will accept Matts answer as it contained some more explanation, although your answer was basically the same. – Fredrik Rafn Strandberg Aug 27 '12 at 21:24
1

CSS transitions apply to style changes on elements. When a new CSS style applies to the element you are able to specify the transition to use in that change. In your example, you have added a span which is created with a red text style. The span element has the red text style on creation. You are not transitioning an element from one style to another, you are simply inserting it with the redtext class style.

What you need to do is add a span with black text inside it, and then change the class of the span from "blacktext" to "redtext", and the transition will apply. You could insert it without a class at all and then change it, but I used the class 'blacktext' to make it easier to identify.

See:

http://jsfiddle.net/n8zNW/

Matt Esch
  • 21,605
  • 8
  • 47
  • 49
  • Thank you for your answer! I now understand that it's best to create the span with a class for black text, which may also be used to reference the span. My problem is however that, just as in Gregs answer above, I can not see any color transition in your jsfiddle, the word instantly turns to red, even if I set the duration to 10 seconds. Tested in newest versions of Opera, Firefox and IE. Maybe I am missing something really basic, I am by far no expert on web development. – Fredrik Rafn Strandberg Aug 27 '12 at 20:50
  • I got it working! Had to correct the forced layout to '$("#message")[0].clientHeight;' as shhac wrote, and move it down after the creation of the span with black text. Thanks a million for your help! – Fredrik Rafn Strandberg Aug 27 '12 at 21:21