Question

我有一个简单的jquery函数，可以在单击表时调整表的大小。

    <script type="text/javascript" src="jquery-1.3.2.min.js"></script>

    <script type="text/javascript">
        $(document).ready(function()
        {
            $('.expand_table').live("click", function()
            {
                $('.expand_table').attr('width', 800);
            }); 
        });
    </script>

我如何在此基础上使表格平滑地扩展或增长到新的尺寸？

Answer 1

使用带有更多选项的animate功能

animate

$(".expand_table").animate({ width: "800px" }, 1500 );

<script type="text/javascript">
    $(document).ready(function()
    {
        $('.expand_table').live("click", function()
        {
                //$('.expand_table').attr('width', 800);
                $(".expand_table").animate({ width: "800px" }, 1500 );
                // 1500 can be replaced with "slow", "normal", or "fast" or a 
                // number that specifies the speed of the animation
        }); 
    });
</script>

Answer 2

但是，您无法为属性设置动画。所以你必须在CSS中设置大小..只需切换

$('.expand_table').attr('width', 800);

有：

$('.expand_table').animate({ "width":"800px" }, 500); //uses 500ms to complete

Answer 3

请参阅此处：http://jqueryui.com/docs/Effects/Methods

你可以申请的很多例子。

最佳

动画一个简单的jquery函数

3 个答案: