Question

I have a problem. I wish to flash (or blink) text from yellow to grey, but I would like the yellow text to remain displayed longer than the grey text.

The code that I have works for an equal duration for each color.

function flashtext(ele,col) {
var tmpColCheck = document.getElementById( ele ).style.color;

   if (tmpColCheck === 'grey') {
       document.getElementById( ele ).style.color = col;
   } else {
       document.getElementById( ele ).style.color = 'grey';
   }
 } 

setInterval(function() {
    flashtext('flashingtext','yellow');
}, 700 ); //set an interval timer up to repeat the function

Any ideas?

Answer 1

You can use setTimeout:

function flashtext(ele,col) {
    var tmpColCheck = document.getElementById( ele ).style.color,
        time;
    if (tmpColCheck === 'grey') {
        document.getElementById( ele ).style.color = col;
        time=1400;
    } else {
        document.getElementById( ele ).style.color = 'grey';
        time=700;
    }
    setTimeout(function(){flashtext('flashingtext','yellow')},time);
}
flashtext('flashingtext','yellow');

DEMO: http://jsfiddle.net/EfpEP/

Edit:

But it can be improved a bit:

function flashtext(ele,col) {
    var style = document.getElementById(ele).style;
    (function main(){
        var cond=style.color === 'grey';
        style.color=cond?col:'grey';
        setTimeout(main,cond?1400:700);
    })();
}
flashtext('flashingtext','yellow');

DEMO: http://jsfiddle.net/EfpEP/3/

Alnitak had the great idea of storing the color because the browser can change it to another syntax. But his code is calling document.getElementById each time. Then, taking his idea, I think the best way is:

function flashtext(ele,col) {
    var style = document.getElementById(ele).style,
        cond=style.color === 'grey';
    (function main(){
        cond=!cond;
        style.color=cond?col:'grey';
        setTimeout(main,cond?1400:700);
    })();
}
flashtext('flashingtext','yellow');

DEMO: http://jsfiddle.net/EfpEP/4/

Edit 2:

But if you are going to use something like

flashtext('flashingtext','yellow');
flashtext('flashingtext2','blue');
...

you will end up freezing the browser.

Instead, you should use

function FlashText(){
    var arr=[],
        cond=false,
        started=false;
    this.add=function(el,col){
        if(typeof el==='string'){el=document.getElementById(el);}
        arr.push([el.style,col]);
    }
    this.start=function(){
        if(started){return;}
        started=true;
        main();
    }
    function main(){
        cond=!cond;        
        for(var i=0,l=arr.length;i<l;i++){
            arr[i][0].color=cond?arr[i][1]:'grey';
        }
        setTimeout(main,cond?1400:700);
    };
}
var flash=new FlashText();
flash.add('flashingtext','yellow');
flash.add('flashingtext2','blue');
flash.start();

You can also call passing an element by reference: flash.add(document.getElementById('flashingtext'),'yellow') (maybe you have a variable which contains an element which has no id).

But try not to add more elements after flash.start(). If you do that, the element will be black (or default color) until main is called (maybe 1.4 seconds).

DEMO: http://jsfiddle.net/EfpEP/6/