Как анимировать высоту DIV плавно автоматически [без использования анимировать() каждый раз]

Question

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

У меня есть DIV:

<div class="blah">Content with 3 lines</div> 

а потом я добавляю еще несколько строк к выше DIV с помощью JQuery, высота DIV является auto так собирается идти дольше, но не плавно, как в любом случае он может пойти более гладко, как с помощью JQuery animate функции?

Я просто не хочу, чтобы ввести одушевленные ({бла}) на любой, АЯКС добавлению записей вызовов и т.д ..

Можно ли иметь функцию, чтобы получить вызов на каждые дивы height changes ? и справиться с ним, используя функцию animate?

Я также читал о переходах, так что я сделал:

.blah{ 
    -webkit-transition: height 1s ease-in-out !important; 
    -moz-transition: height 1s ease-in-out !important; 
    -ms-transition: height 1s ease-in-out !important; 
    -o-transition: height 1s ease-in-out !important; 
    transition: height 1s ease-in-out !important; 
} 

но не работает

метод JQuery, который добавляет данные:

$('blah').append('<p style="clear:both;">Another Line</p>') 

Спасибо заранее

Answer 1

$('.blah').append('<p style="clear:both; display:none" id='new_div'>Another Line</p>'); 
$('#new_div').fadeIn(); 

Вы можете даже обернуть это в функции, как:

function appendAnin(parent,childId){ 
    $(parent).append('<p style="clear:both; display:none" id='"+child+"'>Another Line</p>'); 
    $("#"+childId).fadeIn(); 
} 

, а затем вызвать функцию:

appendAnim(".blah","new_div"); 

Answer 2

Прежде всего, вы используете неверный селектор $('blah'), должен быть $('.blah') и вы хотели показать это плавно, так что вам нужно, чтобы скрыть это первое, то показать или анимации:

Пример:

$('.blah').append('<p style="clear:both;">Another Line</p>').hide().show('slow'); 

fiddle

Answer 3

Demo

JQuery

$("#blah") 
    .hide() 
    .html('<p>Another Line</p><p>Another Line</p><p>Another Line</p>') 
    .slideDown('slow'); 

CSS

div { 
    background:slategray; 
    color:white; 
    padding:20px; 
} 

Answer 4

Переходы будут работать только на прямой ч углов к атрибуту height.

На мой взгляд, единственный способ архивировать это, чтобы создать скрытый «тень» div где вы положили текст в, определить высоту после этого, а затем обновить фактическую div с текстом и в определенной height значения.

Обратите внимание, что теневой div требуется определенная ширина и не использует display: none, так как это предотвратит вычисление размера браузера - используйте left: -100000px.

Я надеюсь, это то, что вы просили: Fiddle

И нет: делать это автоматически (событие типа) не работает, но вы могли бы перенести этот код легко в функцию обертки.