之前的工作有接触到一些css3的新特性。div块的移动和回到初始位置，可以利用在开发中的很多地方。这里记录下来，下次就不用辛苦的灾区百度了。
<html> <head> <script type="text/javascript" src="js/jquery-1.11.1.min.js"></script> <style type="text/css"> </style> </head> <body> <div style="100px;height:30px;" id="trDiv"> <div style="50%;height:100%;background-color:black;float:left" id="div1"></div> <div style="50%;height:100%;background-color:green;float:left" id="div2" onclick="movePlane()"></div> </div> </body> <script type="text/javascript"> /** * 控制检索的面板移动 * 使用css3特效 */ var goLeft = true; function movePlane(){ var style = ''; if(goLeft)style = 'translateX(300px)'; else style = 'translateX(0px)'; $('#div1').css({ 'Webkit-transform':style }); $('#div2').css({ 'Webkit-transform':style }); $('#div1').css({'Webkit-transition' : 'transform 0.5s linear'}); $('#div2').css({'Webkit-transition' : 'transform 0.5s linear'}); goLeft = !goLeft; } </script> </html>