Marching Ants Alternative

Switches between dotted and dashed border to create an illusion similar to marching ants.

HTML

<div id="spanWrapper"> <span>Hmmmmm. </span>
 <span>Well, hello there.</span>
 <span> Hmmmmm. </span>

</div>
<div>
    <button id="startButton">Start</button>
    <button id="stopButton">Stop</button>
</div>
<div>
    <button id="prevButton">Prev</button>
    <button id="nextButton">Next</button>
</div>

CSS

#spanWrapper {
    padding : 10px;
}

JavaScript

var dotdashTimer, dashTimer;
var delay = 530;
var borderGirth = 1;
var borderColour = "#808080";

var children = document.getElementById("spanWrapper").children;
var idx = 0;
var element = children[idx];
var running = false;

function dotdash() {
    element.style.border = borderGirth + "px dotted " + borderColour;
    dashTimer = setTimeout(function dash() {
        element.style.border = borderGirth + "px dashed " + borderColour;
        dotdashTimer = setTimeout(dotdash, delay);
    }, delay);
}

function stop() {
    clearTimeout(dashTimer);
    clearTimeout(dotdashTimer);
    element.style.border = "none";
    element.style.margin = "0px";
    running = false;
}

function start() {
    stop();
    element.style.border = borderGirth + "px dashed " + borderColour;
    element.style.margin = "-" + borderGirth + "px";
    dotdash(element);
    running = true;
}

function next() {
    if (!running) return;
    stop();
    idx = (idx == children.length - 1) ? 0 : idx + 1;
    element = children[idx];
    start();
}

function prev() {
    if (!running) return;
    stop();
    idx = (!idx) ? children.length - 1 : idx - 1;
    element = children[idx];
    start();
}

document.getElementById("startButton").onclick = start;
document.getElementById("stopButton").onclick = stop;
document.getElementById("nextButton").onclick = next;
document.getElementById("prevButton").onclick = prev;