Как установить свойство перехода в элемент ответа jquery?

У меня есть таблица html с процентной шириной, которая содержит некоторый текст. моя функция ajax меняет этот контент на другой текст разной длины, но ширина td будет изменяться непосредственно после ответа ajax. как применить css3 свойство перехода к ширине столбца для повторной калибровки мягких и анимированных столбцов?Как установить свойство перехода в элемент ответа jquery?

мой CSS код:

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

источник

2014-05-29 Max

Я думаю, вы должны добавить все префиксы браузеров для того, чтобы заставить его работать правильно:

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

источник

2014-05-29 09:38:01

Можете ли вы сказать, какой префикс для какого браузера? Буду очень благодарна вам –

Конечно. -webkit для Chrome & Safari и браузеров, использующих движок Webkit, -moz предназначен для Mozilla Firefox, -ms для Internet Explorer и -o для оперы. –

Большое спасибо. Я ценю вашу помощь. –

Вы также можете оживить через 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>

источник

2014-05-29 10:22:03

Как установить свойство перехода в элемент ответа jquery?

ответ

Смежные вопросы