How to achieve the gradual expansion effect when clicking on a row in the table! _javascript skills

I once saw this effect on a flash RIA site. The visual effect is really good. Flash developers probably use this to show that applications made with flash are better than js in terms of dynamic effects (personal opinion). Later, when I was working on bmail, I used gif animation as the background and basically realized this function, but I always felt it was not perfect. This time, I used filters, which are visually smoother and save the trouble of downloading images.

<style> #tbList th{text-align:left;padding-left:20;border:1px solid white;border-right:1px solid #7994BF;border-bottom:1px solid #7994BF} #tbList td{padding-left:6;border-top:1px solid white;border-bottom:1px solid #CDD0E1} </style> <table id="tbList" cellpadding="0" cellspacing="0" width="100%" style="cursor:default;font-size:12"> <tr height="25" bgcolor="#C1D1EA"> <th width="160">寄件人</th> <th>主题</th> <th width="90">日期</th> <th width="90">大小</th> </tr> <tr height="25"> <td>关羽</td> <td>大意失荆州</td> <td>8月7日</td> <td>4k</td> </tr> <tr height="25"> <td>张飞</td> <td>长板坡一吼，吓退十万雄兵</td> <td>3月24日</td> <td>5k</td> </tr> <tr height="25"> <td>赵云</td> <td>最帅莫过赵子龙</td> <td>3月24日</td> <td>3k</td> </tr> </table> >>Click on the table above to see the row gradually expanding effect
[Ctrl A select all Note: If you need to introduce external Js, you need to refresh to execute

]<script> document.getElementById("tbList").onmousedown=function(e){ var tb=this,tr,ee ee=e==null?event.srcElement:e.target if(ee.tagName!="TD") return tr=ee.parentNode if(tb.selRow!=null) setTrReveal(tb.selRow,"background:white",1) setTrReveal(tr,"background:#EAEAEA") tb.selRow=tr } function setTrReveal(tr,css,noDelay){ var i if(!document.all) return tr.style.cssText+=";"+css for(i=0;i< tr.cells.length;i++){ if(noDelay){ tr.cells[i].style.cssText+=";"+css continue } tr.cells[i].style.filter="progid:DXImageTransform.Microsoft.RevealTrans(duration=0.5,transition=16)" tr.cells[i].filters[0].apply() tr.cells[i].style.cssText+=";"+css tr.cells[i].filters[0].play() } } </script>