如何将transition属性设置为jquery响应元素?

时间:2014-05-29 09:24:44

标签: jquery ajax html5 css3 animation

我有一个包含一些文本的百分比宽度的html表。我的ajax函数将此内容更改为另一个具有不同长度的文本,但td宽度将在ajax响应后直接重新调整大小。如何将css3过渡属性应用于列宽以进行软和动画列重新调整大小?

我的css代码:

table  tr td{
    color: #00cf00;
    padding: 2%;
    font-family: "Courier New";
    font-size: 16px;
    line-height: 3;
    transition: width 1s;
}

2 个答案:

答案 0 :(得分:0)

我认为您应该添加所有浏览器前缀以使其正常工作:

-webkit-transition: width 1s;
-moz-transition: width 1s;
-ms-transition: width 1s;
-o-transition: width 1s;
transition: width 1s;

答案 1 :(得分:0)

您还可以通过jquery进行动画处理。这很容易。以下代码可以顺畅地更改列大小。

<!DOCTYPE html>
<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
    $("table tr td").animate({width:"100px"},2000);
    $("table tr td").animate({height:'100px'},1000);
});
</script>
</head>
<body>
<div> 
<table >
<tr><td style="background:red; width:200px;height:200px;text-align:center">Ammad</td><td style="text-align:center;background:green; width:200px;height:200px;" >Umair</td></tr>
</table>

</body>
</html>