Question

我想为我的网站设置一个最小化表格按钮，所以我只是搞乱了一些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>

非常感谢，

Answer 1

为什么单击按钮后（和它缩小了它的尺寸）它又回到了默认大小？

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

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

Answer 2

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

Answer 3

为动画使用以下代码：

$("#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链接的解决方案。

Answer 4

尝试给#tablemin提供样式overflow:hidden

表的Jquery问题（.animate）

4 个答案: