Edit in JSFiddle

var template = $("#order-template").html();
var element  = $($.parseHTML(template));

element.attr("class", "pending");

$("#orders").append(element);

setTimeout(function(){

    element.attr("class", "processing");
    
}, 1000);

<script id="order-template" type="text/template">
    <li>test</li>
</script>

<ul id="orders"></ul>

li {
    width: 100px;
    height: 20px;
    transition: background-color 2s;
}

li.pending {
    background-color: #eee;
}

li.processing {
    background-color: #fd8;
}

li.delivered {
    background-color: #ddd;
}