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; }