animation - How do I animate a strike through effect using JavaScript on a piece of text?

Question

I want to try create an effect where by when I trigger an event an animated line strikes through a piece of text. The effect should be done in Java Script.

Can someone suggest some ways to do this? I have text already on a page and I would like the text to strike through from left to right as if a line is being drawn

Answer 1

Using jQuery it's possible with little tweak: http://jsfiddle.net/yahavbr/EbNh7/

JS in use:

var _text = "";
$(document).ready(function() {
    _text = $("#myDiv").text();
    StrikeThrough(0);
});

function StrikeThrough(index) {
    if (index >= _text.length)
        return false;
    var sToStrike = _text.substr(0, index + 1);
    var sAfter = (index < (_text.length - 1)) ? _text.substr(index + 1, _text.length - index) : "";
    $("#myDiv").html("<strike>" + sToStrike + "</strike>" + sAfter);
    window.setTimeout(function() {
        StrikeThrough(index + 1);
    }, 100);
}

This will strike through myDiv text, making the line appear with animation.

As it's not using any heavy jQuery stuff it can be converted to plain JavaScript pretty easily so if you prefer not to use jQuery I'll edit my answer.