動畫一個簡單的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功能

回答

相關問題