IE7上的Javascript/CSS慢动作菜单

我正在工作的项目中有一种菜单，它只在IE7浏览器中使用。 HTML:

我想做的是为每一列设置3个“父”按钮（a

）。当我单击其中一个按钮时，按钮必须缓慢地显示在其下方（取决于列）

是否有任何CSS/JS脚本可供我使用？我的主要问题是我必须使用IE7，我在谷歌上搜索了一些东西，没有发现任何有用的东西

---

在这里您可以找到一些示例。

如果您还没有找到，请查看JqueryUI。我发现它很容易理解，而且它几乎为您处理了css和动画的所有底层细节

---

它还解决了您可能遇到的几乎所有的多浏览器问题。

Javascript上是否有任何等价的东西？好的，这个答案（）已经在堆栈上了，它最终会导致：关于这个问题有什么新闻吗？

<table class="tabellaquad" cellspacing="20">
    <tr>
        <td>
        <a class="item" href="index.jsp?quad=1">
        <div align="center" class="tabquad">
            ONE
        </div>
        </a>
        </td>
        <td>
        <a class="item" href="index.jsp?quad=7">
        <div align="center" class="tabquad">
            1
        </div>
        </a>
        </td>
        <td>
        <a class="item" href="index.jsp?quad=4">
        <div align="center" class="tabquad">
            RED
        </div>
        </a>
        </td>
    </tr>
    <tr>
        <td>
        <a class="item" href="index.jsp?quad=2">
        <div align="center" class="tabquad">
            TWO
        </div>
        </a>
        </td>
        <td>
        <a class="item" href="index.jsp?quad=8">
        <div align="center" class="tabquad">
            2
        </div>
        </a>
        </td>
        <td>
        <a class="item" href="index.jsp?quad=5">
        <div align="center" class="tabquad">
            BLUE
        </div>
        </a>
        </td>
    </tr>
    <tr>
        <td>
        <a class="item" href="index.jsp?quad=3">
        <div align="center" class="tabquad">
            THREE
        </div>
        </a>
        </td>
        <td>
        <a class="item" href="index.jsp?quad=9">
        <div align="center" class="tabquad">
            3
        </div>
        </a>
        </td>
        <td>
        <a class="item" href="index.jsp?quad=6">
        <div align="center" class="tabquad">
            YELLOW
        </div>
        </a>
        </td>
    </tr>
    <tr>
        <td>
        </td>
        <td>
       <a class="item" href="index.jsp?quad=10">
        <div align="center" class="tabquad">
            4
        </div>
        </a>
        </td>
        <td>
        </td>
    </tr>
    <tr>
        <td>
        </td>
        <td>
        <a class="item" href="index.jsp?quad=11">
        <div align="center" class="tabquad">
            5
        </div>
        </a>
        </td>
        <td>
        </td>
    </tr>
</table>

.tabellaquad{
margin:auto;
position:relative;
width:40%;
text-align:center;
}

.tabquad{
color:white;
margin:auto;
position:relative;
border:2px solid #000;
border-color:rgb(82,115,154);
width:200px;
height:30px;
text-align:center;
padding-top:10px;
top:25px;
background-color:rgb(0,56,130);
}
.tabquad:hover{
background-color:rgb(49,87,132);
cursor: hand;
}