Basic Animation using Native Javascript

This demo shows how two div's get swapped with a delay of one second.

by queryj

HTML

<div class="left" id="left">
    left block;
</div>
<div class="right" id="right">
    right block;
</div>
<span id="clock">
</span>

CSS

.left{
    height: 100px; width: 100px;
    float: left;
    background-color: red;
}

.right{
    height: 100px; width: 100px;
    float: right;
    background-color: yellow;
}

JavaScript

function swap(){
    var l = document.getElementById("left");
    var r = document.getElementById("right");
    
    l.removeAttribute("class");
    l.setAttribute("class", "right");
    l.style.backgroundColor = "red";
    
    r.removeAttribute("class");
    r.setAttribute("class", "left");    
    r.style.backgroundColor = "yellow";
}

var tid = setTimeout(swap, 1000);
//clearTimeout(tid); //<-- this line cancels setTimeout execution.

function createClock(){
    var sp = document.getElementById("clock");
    var now = new Date();
    var time = document.createTextNode(now.getHours() + ":" + now.getMinutes() + ":" + now.getSeconds());
    sp.innerHTML = "";
    sp.appendChild(time);
}

setInterval(createClock, 1000);
//setTimeout(createClock, 1000);