动画一个简单的jQuery功能

我有一个简单的jquery函数，当它被点击时调整表的大小。动画一个简单的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>

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

来源

2009-09-16 ian

你不能动画的属性，虽然。所以，你必须设置在CSS的大小..只是切换

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

为：

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

来源

2009-09-16 06:44:00 peirix

谢谢。有没有一种方法可以阻止表格内的在调整大小期间缩小？当动画开始时，它们变得非常小，然后当它动画完成弹出到全尺寸。 – ian 2009-09-16 06:51:32

我还没有研究过动画桌子的大小，但'tr'不应该真正的出入。你的意思是'td'吗？你可以为表格单元格设置单独的动画，如果你想...... – peirix 2009-09-16 07:06:49

是的，它可能是tds。谢谢。 – ian 2009-09-16 14:56:18

使用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>

来源

2009-09-16 06:37:36 rahul

参考这里：http://jqueryui.com/docs/Effects/Methods

很多例子可以应用上。

最好

来源

2009-09-16 06:45:13

动画一个简单的jQuery功能

回答

相关问题