Jquery 为动态添加的html的显示设置动画

我在任何地方都找不到这个解决方案

用户进行选择并输入一些值。当他单击添加时，我希望使用jQuery添加的html在视图中设置动画（或向下滑动）。如何检索元素高度以设置值

这是父母

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

---

如果您想向下滑动的是新的summary_html，您可以这样做。在追加DOM元素之前将其隐藏，然后使用

.slideDown（）

使其在追加后可见

下面是一个有效的演示（用更简单的代码来说明）：

下面是实现的代码：

// 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();
});

//从用户输入构建摘要框
函数create_summary（）{
var summary_html=''；
if（$（'.cycle-01'）.hasClass（'cycle-slide-active'））{
summary_html=$（'
'+$（'.cycle-01.step-2-container.number'）。在'+$（'.cycle-01.step-1-container.country'）中查找（'.cycle-01.step-2-container.number'）。在'+$（'.cycle-01.step-3-container.country'）中查找（'option:selected'）。attr（'value'）+'）。在'+$（'.cycle-01.step-4-container#ForwardNumberTo'）.attr（“value”）+'
'+$（'.billing options hidden'）.find（“option:selected”）.attr（“value”）+'（第一个月免费），每分钟使用的成本为“+$”（'.per分钟”）.text（）+”
'；
}否则{
summary_html=$（'
'+$（'.cycle-02.step-1-container.country'）.find（“选项：选定”）.attr（“值”）+'+$（'.cycle-02.step-2-container.state'）.find（“选项：选定”）+$（'.cycle-02.step-3-container.city'）.find（“选项：选定”）.attr（“值”）+'+'+$（.cycle-02.step-4-container.local'）.find'）(“option:selected”）.attr（“value”）+”
'+$（'.billing options hidden'）。查找（“option:selected”）.attr（“value”）+'（第一个月免费），每分钟使用的成本为“+$（'.per minute”）.text（）+”
'；
}
summary_html.hide（）；
$（'.order summary wrap'）.append（summary_html）；
summary_html.slideDown（）；
}
//单击事件将摘要框动态添加到DOM中
$（'.第一步，.添加编号'）。单击（函数（e）{
创建_摘要（）；
});

如果要向下滑动的是新的摘要html，可以这样做。在附加DOM元素之前隐藏它，然后使用

.slideDown（）

使其在附加后可见

下面是一个有效的演示（用更简单的代码来说明）：

下面是实现的代码：

// 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();
});

//从用户输入构建摘要框
函数create_summary（）{
var summary_html=''；
if（$（'.cycle-01'）.hasClass（'cycle-slide-active'））{
summary_html=$（'
'+$（'.cycle-01.step-2-container.number'）。在'+$（'.cycle-01.step-1-container.country'）中查找（'.cycle-01.step-2-container.number'）。在'+$（'.cycle-01.step-3-container.country'）中查找（'option:selected'）。attr（'value'）+'）。在'+$（'.cycle-01.step-4-container#ForwardNumberTo'）.attr（“value”）+'
'+$（'.billing options hidden'）.find（“option:selected”）.attr（“value”）+'（第一个月免费），每分钟使用的成本为“+$”（'.per分钟”）.text（）+”
'；
}否则{
摘要html=$（'
'+$（'.cycle-02.step-1-container.country'）.find（“选项：已选”）.attr（“值”）+'+$（'.cycle-02.step-2-container.state'）.find（“选项：已选”）.attr（“值”）+'+$（'.cycle-02.step-3-container.city'）.find（“选项：已选”）.attr”）.attr（“值”）+'+'+$（.cycle-02.step-4-container.local'）.find（”选项：selected“）.attr（“value”）+”
“+$”（“.billing options hidden”）.find（“选项：selected”）.attr（“value”）+”（第一个月免费），使用的每分钟成本为“+$”（“.per minute”）.text（）+”
”；
}
summary_html.hide（）；
$（'.order summary wrap'）.append（summary_html）；
summary_html.slideDown（）；
}
//单击事件将摘要框动态添加到DOM中
$（'.第一步，.添加编号'）。单击（函数（e）{
创建_摘要（）；
});

jfriend00击败了我。你也可以从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();
});

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

---

jfriend00击败了我。你也可以从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();
});

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

---

不确定这是否会实际显示动画。我认为

.remove（）

将在动画开始之前立即运行。可能必须在动画完成函数中执行

.remove（）

。啊，是的。抱歉，在火车上写了这么快。您是对的，需要在slideUp（）的回调中运行.remove（）。谢谢您的帮助。@A将“.remove”放置在“.slideUp”的回调中效果很好。我不确定这是否会显示动画。我认为

.remove（）

将在动画之前立即运行。可能必须执行

.remove（）

在动画完成函数中。啊，是的。对不起，在火车上写得那么快。你是对的，需要在slideUp（）的回调中运行.remove（）.谢谢您的帮助。@A placement.remove'在.slideUp'的回调中工作得很好。工作得很好！非常干净，方法很好。非常感谢。工作得很好！非常干净，方法很好。非常感谢。