自定义动画之一列中某一图片在表格中依次移动到不同列


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></title>
    <style type="text/css">
         .imgclass
        {           
 
 
            border: solid 1px red;
            position:relative;
        }
   
        .style3
        {
            height: 47px;
        }
        .style4
        {
            width: 70px;
            height: 56px;
        }
        .style6
        {
            height: 58px;
        }
        .style7
        {
            width: 70px;
            height: 56px;
        }
        .style9
        {
            height: 56px;
        }
        .style10
        {
            width: 70px;
            height: 56px;
        }
   
    </style>
    <script src="jquery-1.9.1.js" type="text/javascript"></script>
    <script type="text/javascript">
        $(function () {
            $('.imgclass').click(function () {
                $(this).animate({ left: '+=76px' }, 2000).animate({ left: '+=76px' }, 2000).animate({ top: '+=64px' }, 2000).animate({ left: '-=76px' }, 2000).animate({ left: '-=76px' }, 2000).animate({ top: '+=66px' }, 2000).animate({ left: '+=76px' }, 2000).animate({ left: '+=76px' }, 2000);
   
    })
   
    })
    </script>
   
</head>
<body>
<div style=" width:450px; height:450px">
<table border="1" >
<tr><td class="style9"><img src="images/1.jpg" class="imgclass" style="width: 70px; height: 56px" /></td>
    <td class="style10"></td><td class="style10"></td></tr>
<tr><td class="style6"></td><td class="style7"></td><td class="style7"></td></tr>
<tr><td class="style3"></td><td class="style4"></td><td class="style4"></td></tr>
</table></div>
</body>
</html>

补充：web前端 , JavaScript ,