Здравствуйте. немного освоив jquery и такие css свойства как transition сразу стал с этим играться. задача: есть div с определенной шириной. в нем две "заголовочные" строки, а потом основной контент. изначально высота установлена такой, что видны только первые две строки (при этом конечно overflow:hidden). на второй строке есть кнопка, по нажатию которой высота увеличивается и показывает весь свой контент. Суть в том, чтобы высота увеличивалась именно на высоту всего контента. Пытался решить вопрос таким образом: по клику на кнопку высота устанавливается "auto". В принципе, высота и правда становится той что нужно, но, т.к. при этом задано transition и увеличение высоты выполняется чуть меньше чем за секунду, становится видно, что высота уменьшается плавно до 0, а потом резко становится какой надо. а когда нажимаю на кнопку ещё раз (должна возвращаться обратно до видимости 2 строк) - наоборот высота мгновенно становится 0 и плавно возрастает до двух строк.
что интересно, если задавать высоту не auto, а какое то конкретное значение ставить, то всё происходит как надо. плавно увеличивается и плавно уменьшается без всяких скачков.
jquery:
$('div.self > center > span').click(function()
{
if (this.textContent == "Свернуть")
{
$('div.self').css('height','80px');
this.textContent ='Показать';
}
else
{
$('div.self').css('height','auto');
this.textContent = 'Свернуть';
}
});
css:
.self
{
position: fixed;
-webkit-box-shadow: 4px 4px 4px gainsboro;
-moz-box-shadow: 4px 4px 4px gainsboro;
box-shadow: 4px 4px 4px gainsboro;
padding: 5px;
width: 20%;
height: 80px;
border-radius: 15px;
border: 2px solid #FFA500;
margin-top: 12px;
overflow: hidden;
-webkit-transition: 0.8s ease;
-o-transition: 0.8s ease;
-moz-transition: 0.8s ease;
}
та же история с элементом, который я хочу раскрывать в ширину. если ставить ширину auto, то скачками меняется и не в ту сторону.
Вот как это всё дело выглядит:
https://downloader.disk.yandex.ru/pr...size=XL&crop=0