Анимировать отображение динамически добавленного html

Question

Я не мог найти это решение нигде.

Пользователь делает выбор и вводит некоторые значения. Когда он нажимает, чтобы добавить, я хочу, чтобы html, который был добавлен с jQuery для анимации (или спуска) вниз. Как получить высоту элемента, чтобы установить значение?

Это родитель;

<div class="order-summary-wrap"></div> 

Этот код работает, но это сотрясает.

// build the summary boxes from the users inputs 
function create_summary(){ 
    var summary_html = ''; 

    if($('.cycle-01').hasClass('cycle-slide-active')){ 
     summary_html = '<div class="toll-free-summary-contents remove-me"><p class="line-one"><span class="new-toll-free-number">' + $('.cycle-01 .step-2-container .number').find("option:selected").attr("value") + '</span> in <span class="from-toll-free-country">' + $('.cycle-01 .step-1-container .country').find("option:selected").attr("value") + '</span> will ring to <span class="forward-to-number">' + $('.cycle-01 .step-3-container .country').find("option:selected").attr("value") + '</span> in <span class="to-toll-free-country">' + $('.cycle-01 .step-4-container #ForwardNumberTo').attr("value") + '</span></p><p class="line-two"><span class="toll-free-cost">' + $('.billing-options-hidden').find("option:selected").attr("value") + '</span> (FIRST MONTH FREE) with each minute used costing <span class="toll-free-per-minute-cost">' + $('.per-minute').text() + '</span></p><div class="remove"><a class="remove-link" href="#">Remove</a><a class="view-link" href="#">View Sample Bill</a></div></div>'; 
    } else { 
     summary_html = '<div class="local-summary-contents remove-me"><p class="line-one"><span class="country-local-number">' + $('.cycle-02 .step-1-container .country').find("option:selected").attr("value") + '</span> <span class="state-local-number">' + $('.cycle-02 .step-2-container .state').find("option:selected").attr("value") + '</span> <span class="city-local-number">' + $('.cycle-02 .step-3-container .city').find("option:selected").attr("value") + '</span> <span class="new-local-number">' + $('.cycle-02 .step-4-container .local').find("option:selected").attr("value") + '</span></p><p class="line-two"><span class="toll-free-cost">' + $('.billing-options-hidden').find("option:selected").attr("value") + '</span> (FIRST MONTH FREE) with each minute used costing <span class="toll-free-per-minute-cost">' + $('.per-minute').text() + '</span></p><div class="remove"><a class="remove-link" href="#">Remove</a><a class="view-link" href="#">View Sample Bill</a></div></div>'; 
    } 

    $('.order-summary-wrap').append(summary_html); 
    $('.add-more-numbers').removeClass('hidden'); 
} 

// click event to dynamically add the summary boxes to the DOM 
$('.first-step, .add-number').click(function(e){ 
    create_summary(); 
}); 

Кроме того, когда ссылка «удалить» щелкают, я хотел бы, чтобы элемент анимации, как он удаляется из DOM.

// lets the user remove the number from the DOM 
$('.order-summary-wrap').on('click', '.remove-link', function(e) { 
    e.preventDefault(); 
    $(this).parent().parent().remove(); 
}); 

Answer 1

Если это новый summary_html, который вы хотите сдвинуть вниз, вы можете сделать это вот так. Скройте элемент DOM перед его добавлением, затем используйте .slideDown(), чтобы сделать его видимым после добавления его.

Вот рабочий пример (с простым кодом для иллюстрации): http://jsfiddle.net/jfriend00/gHcZJ/

И вот ваш код с этим реализованным:

// build the summary boxes from the users inputs 
function create_summary(){ 
    var summary_html = ''; 

    if($('.cycle-01').hasClass('cycle-slide-active')){ 
     summary_html = $('<div class="toll-free-summary-contents remove-me"><p class="line-one"><span class="new-toll-free-number">' + $('.cycle-01 .step-2-container .number').find("option:selected").attr("value") + '</span> in <span class="from-toll-free-country">' + $('.cycle-01 .step-1-container .country').find("option:selected").attr("value") + '</span> will ring to <span class="forward-to-number">' + $('.cycle-01 .step-3-container .country').find("option:selected").attr("value") + '</span> in <span class="to-toll-free-country">' + $('.cycle-01 .step-4-container #ForwardNumberTo').attr("value") + '</span></p><p class="line-two"><span class="toll-free-cost">' + $('.billing-options-hidden').find("option:selected").attr("value") + '</span> (FIRST MONTH FREE) with each minute used costing <span class="toll-free-per-minute-cost">' + $('.per-minute').text() + '</span></p><div class="remove"><a class="remove-link" href="#">Remove</a><a class="view-link" href="#">View Sample Bill</a></div></div>'); 
    } else { 
     summary_html = $('<div class="local-summary-contents remove-me"><p class="line-one"><span class="country-local-number">' + $('.cycle-02 .step-1-container .country').find("option:selected").attr("value") + '</span> <span class="state-local-number">' + $('.cycle-02 .step-2-container .state').find("option:selected").attr("value") + '</span> <span class="city-local-number">' + $('.cycle-02 .step-3-container .city').find("option:selected").attr("value") + '</span> <span class="new-local-number">' + $('.cycle-02 .step-4-container .local').find("option:selected").attr("value") + '</span></p><p class="line-two"><span class="toll-free-cost">' + $('.billing-options-hidden').find("option:selected").attr("value") + '</span> (FIRST MONTH FREE) with each minute used costing <span class="toll-free-per-minute-cost">' + $('.per-minute').text() + '</span></p><div class="remove"><a class="remove-link" href="#">Remove</a><a class="view-link" href="#">View Sample Bill</a></div></div>'); 
    } 
    summary_html.hide(); 
    $('.order-summary-wrap').append(summary_html); 
    summary_html.slideDown(); 
} 

// click event to dynamically add the summary boxes to the DOM 
$('.first-step, .add-number').click(function(e){ 
    create_summary(); 
}); 

Answer 2

jfriend00 бить меня к нему. Вы можете сделать то же самое для удаления номера из DOM.

$('.order-summary-wrap').on('click', '.remove-link', function(e) { 
    e.preventDefault(); 
    $(this).parent().parent().slideUp().remove(); 
});