如何将转换属性设置为 jquery 响应元素？答案

【问题标题】：how to set transition property to jquery response element?如何将转换属性设置为 jquery 响应元素？
【发布时间】：2014-05-29 09:24:44
【问题描述】：

我有一个包含一些文本的百分比宽度的 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;
}

【问题讨论】：

标签： jquery ajax html css animation

【解决方案1】：

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

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

【讨论】：

你能告诉我哪个前缀是哪个浏览器的吗？我会非常感谢你
当然。 -webkit 用于 Chrome 和 Safari 以及使用 Webkit 引擎的浏览器，-moz 用于 Mozilla Firefox，-ms 用于 Internet Explorer，-o 用于 Opera。
非常感谢。感谢您的帮助。

【解决方案2】：

您也可以通过 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>

【讨论】：