0

Здравствуйте.
Есть задача. Возьмем элемент

<div id="myInfoElem" style = "width: 100px;">текст</div>

Мне надо, чтобы после добавления большого количества текста в этот элемент, его высота плавно увеличилась и стала по размеру текста.

PS: Без использования каких-либо библиотек.

4
  • Поясните пожалуйста что значит "плавно"? при добавлении в контейнер при отсутствии у него свойств overflow он и так будет увеличиваться в размере что-бы вместить весь текст 18 янв 2012 в 13:41
  • ДА. При добавлении текста, высота элемента DIV изменится, например, с 50px до 230px сразу. Мне надо, чтобы высота увеличилась с анимацией. Т.е. чтобы высота элемента плавно увеличилась, например, с 50px до 230px (с установкой такого эффекта проблем нет). Ну а сделать эффект так, как будто бы там уже есть текст и остановить увеличение высоты DIV на нужном размере - вот в чем главная проблема. При том, что надо показывать что-то вроде (бла-бла-бла .....), и при нажатии, появляется полный текст. 18 янв 2012 в 13:49
  • Хорошая идея. Можно ее в ответ и подробнее? 18 янв 2012 в 14:26
  • Добавил как ответ.
    – ling
    18 янв 2012 в 14:47

5 ответов 5

5

Рабочий код (по крайней мере, firefox9 + ie8)

<div id="outer" style="overflow: hidden; width: 100px;height: 25px; border: #0f0 1px dashed;">
  <div id="inner" style="padding: 5px;">
  text 
  </div>
</div>
<input type="button" value="add text" onclick="g('inner').innerHTML += g('inner').innerHTML;animateSlide('outer', g('inner').offsetHeight+10);" />
<input type="button" value="remove text" onclick="g('inner').innerHTML = 'text ';animateSlide('outer', 25);" />
<script type="text/javascript">
  function g(id) { return document.getElementById(id); }
  function animateSlide(id, toHeight) {
    var slowing = arguments[2] || 0.1;
    var frameDelay = arguments[3] || 50;
    var byTimeout = arguments[4] || false;
    if (!byTimeout && window['anim_slide_'+id])
        clearTimeout(window['anim_slide_'+id]);
    var el = g(id);
    var dh = Math.ceil((toHeight - el.offsetHeight)*slowing);
    el.style.height = (parseInt(el.style.height)+dh)+'px';
    if (Math.abs(dh) > 0) {
      window['anim_slide_'+id] = setTimeout('animateSlide("'+id+'", '+toHeight+', '+slowing+', '+frameDelay+', true)', frameDelay);
    } else window['anim_slide_'+id] = false;
  }
</script>
3
  • Как красиво работает! Спасибо. 19 янв 2012 в 5:32
  • @Антон Мухин пожалуйста) Примите апдейт, исправил баг. Было: если ткнуть несколько раз, высота начинала скакать и анимация зацикливалась. Стало: предыдущая анимация обрывается.
    – Sh4dow
    19 янв 2012 в 13:34
  • Да, спасибо! 19 янв 2012 в 13:51
2

Как вариант: поставить в контейнер еще один div, контейнеру задать overflow:hidden, менять содержимое внутреннего div'a и считать новую высоту по нему.

ДОБАВЛЕНО

<style>
.comment{height:50px;overflow:hidden;border:1px #000 solid}
</style>
<script>
function f(x){
    x.style.height = Math.round(Math.random()*300) + 'px';

    var newHeight = x.clientHeight;
    var container = x.parentNode.parentNode;
    var oldHeight = container.clientHeight;

    //container.style.height = newHeight + 'px'; или анимация
}
</script>

<div class="comment">
    <div>
        <div style="height:50px;width:50px;background:#33c" onClick="f(this);"></div>
    </div>
</div>
1

Маленько <s>говнокода</s> типа анимация) Жаль времени нет поразмышлять для нормальной работы) Просьба строго не наказывать)

<html>
<head>
<script type="text/javascript">
function newHeight()
{
    var div = document.getElementById("mydiv");
    var divHeight = div.style.height;
    var newHeight = divHeight.substr(0, 2);
    newHeight = ++newHeight;
    div.style.height = newHeight + 'px';
}
setInterval(newHeight, 8);
</script>
</head>
<body>
<div id="mydiv" style="height: 20px; background: #434343; width: 500px; margin: 20px auto; box-shadow: 0 0 10px rgba(0,0,0,0.5); border-radius: 5px; padding: 5px; font-weight: bold; text-align: center; color: #FFF; text-shadow: 1px 1px 1px #6b6b6b;">Тестируй меня в опере</div>
</body>
</html>
0

Попробуйте сохранять clientHeight в переменную и затем возвращать прежний размер(50px), а дальше анимацией до сохраненного значения

1
  • Не понял вашу идею. Можно подробнее? 18 янв 2012 в 14:26
0

вкладываешь div (#txt) в другой div (#txtholder) с overflow:hidden. C помощью JS устанавливаешь высоту #txtholder=#txt. При изменении размера вложенного сверяешь высоту двух слоев. Если #txtholder<#txt, то проверяешь на переход границы появления "читать далее". Ну, а дальше остаётся плавно менять высоту #txtholder.

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge you have read our privacy policy.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.