表的 Jquery 问题（.animate）答案

【问题标题】：Jquery problem with a table (.animate)表的 Jquery 问题（.animate）
【发布时间】：2010-11-12 09:37:07
【问题描述】：

我想要我的网站的最小化表格按钮，所以我只是在搞乱一些 Jquery，我想知道为什么在单击按钮后（并且它减小了它的大小）它会恢复到默认大小？ - .animate 完成后？

-在那里试试，

代码：

<html>
<head>
<style type="text/css">
#tablemin { 
  height:inherit;
}
</style>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
</head>
<body>
<input type="button" value="Click Here" onClick="dostuff();">
<div id="tablemin">
<table bordercolor="#0000FF" width="670" border="1">
        <tr>
          <td class="style5" width="400" valign="top" style="width: 300px"><b><u>Personal Feed: </u></b><br>
          </td>
          <td class="style5" width="355" valign="top"><u><strong>Live Feed:</strong> </u><br>
              <div id="ReloadTime3" style="width: 350px">  
</div></td>
        </tr>
        <tr>
          <td class="style5" valign="top" colspan="3" style="width: 488px"><b><u>Local news for Zone B-4...</u></b></td></tr>
      </table>
</div>
<script type="text/javascript">
function dostuff() {
$("#tablemin").animate({ 
    //opacity: "0.4",
    height: "50px"
    }, 1000 );

}
//$(document.body).click(function () {
//$('#tablemin').animate({height:'1px'}, 'slow');
//$('#tablemin').fadeOut(1);
//}); 
</script>
Hi
</body></html>

非常感谢，

【问题讨论】：

我使用的是 IE 7 顺便说一句，如果完成后它没有扩展，请说:)
(zombiewrath.com/maintest.php) - 如果有人想要的话：P
^唯一的问题是 div 中的文字很奇怪...但我可以忍受...

标签： javascript jquery

【解决方案1】：

为什么在单击按钮后（和它减小了它的大小）它又长回到了默认大小？

使用您当前的代码，执行此操作，

<style type="text/css">
#tablemin { 
  height:inherit;
  overflow: hidden;
}
</style>

【讨论】：

【解决方案2】：

它不会重新长出来（至少在 FF3.6 中），表只是溢出它。

【讨论】：

Chrome 7.0 mac os 也没有。你的#tablemin 从 52px 减少到 50px。蓝色底边框在动画过程中消失，完成后出现（因为它溢出了上面提到的“Hi”文本）
iPhone 3G (iOS 4.1) 上的 Safari 也是如此，但这个答案更多的是评论，而不是答案。

【解决方案3】：

尝试给#tablemin 样式overflow:hidden

【讨论】：

【解决方案4】：

使用以下代码制作动画：

$("#tablemin").animate({
    opacity: 0.25,
    left: '+=50',
    height: 'toggle'
}, 1500);

您可能需要在高度上添加“切换”。

<body>
    <input type="button" value="Click Here" id="btn" onclick="dostuff();">
    <div id="tablemin">
        <table bordercolor="#0000FF" width="670" border="1">
            <tr>
                <td class="style5" width="400" valign="top" style="width: 300px">
                    <b><u>Personal Feed: </u></b>
                    <br>
                </td>
                <td class="style5" width="355" valign="top">
                    <u><strong>Live Feed:</strong> </u>
                    <br>
                    <div id="ReloadTime3" style="width: 350px">
                    </div>
                </td>
            </tr>
            <tr>
                <td class="style5" valign="top" colspan="3" style="width: 488px">
                    <b><u>Local news for Zone B-4...</u></b>
                </td>
            </tr>
        </table>
    </div>

    <script type="text/javascript">

        $("#btn").click(function() {
            $("#tablemin").animate({
                opacity: 0.25,
                left: '+=50',
                height: 'toggle'

            }, 1500);
        });

    </script>
</body>

至于闪烁问题，你或许可以通过this链接找到解决方案。

【讨论】：

当我尝试这样做时没有任何反应...（页面错误）