shifting lists

by hellosze

HTML

<ul>
<li class="first">Step 0. Preparation</li>
<li>Step 1. You Create the Database</li>
<li>Step 2a. Yii Generates the Model Classes</li>
<Li>Step 2b. Yii Generates the CRUD Code</li>
<li>Step 3. You customize the code to fit your exact needs</li>
</ul>
<ul class="temp">
    <li class="left">left</li>
</ul>

CSS

ul { background: #ccc; }
ul li { padding: 5px; position: absolute; left: 0px; height: 50px;}
.even { background: #fff; }
.odd { background: #ccc; }
ul.temp { position: static; }
.left { position: absolute; left: -90px; }

JavaScript

//$("ul li:even").addClass("even");
//$("ul li:odd").addClass("odd");
//$("ul li:eq(0)").animate({"padding-left","200px"},1800);
i = 0;
$("ul li").each(function(){
    i = i + 50;
   $(this).addClass("even").css("top",i);
});
$("ul li:eq(0)").animate({"left":"-150px","display":"none"},400,function(){
    i = 0;
    $(this).remove();
    $("ul li").each(function(){
        i = i + 50;
        $(this).addClass("even").css("top",i);
    });
$("ul li:eq(0)").animate({"left":"-150px","display":"none"},400,function(){
    i = 0;
    $(this).remove();
    $("ul li").each(function(){
        i = i + 50;
        $(this).addClass("even").css("top",i);
    });
});
    
});