平滑地将父div增长到添加的子div的高度-Javascript

我在这个网站上到处寻找我想要实现的目标的解释，但是还没有找到一个适合我的情况的答案

我有一个div，它是表单验证的警报框

<div id="alert_box" class="alert alert-danger alert-dismissable" 
     style="margin-top:0px !important; margin-bottom:0px !important; 
     display:none;">
//Alert message goes in here
</div>

function validatePassword(fld) {
       var input_div = document.getElementById('createPassword_div');
       var alert_box = document.getElementById('alert_box');

       if (fld.value == "") {
          input_div.className += ' has-error'; 
          alert_box.style.display = 'block';
          alert_box.innerHTML = "You didn't enter a password";
          return false;
       } 

       return true;
    }

当子div设置为显示时，如何使父div平滑增长？

$（文档）.ready（函数（）{
setTimeout（函数（）{
$（“#error”）.html（“错误消息”）.hide（）；
$（“#错误”）.slideDown（）；
}, 1000);
})

.temp{
高度：50px；
}
#错误{
高度：自动；
}

ABCD-EDFG
ABCD-EDFG
ABCD-EDFG

分享你完整的

HTML

。如果这是你想要的东西，请使用jqueryTell me中的任何动画。这正是我想要的。但是有没有办法检查error div是否已经显示？$（“#error”）.is（“：hidden”）将在隐藏时为true，否则为false

function validatePassword(fld) {
       var input_div = document.getElementById('createPassword_div');
       var alert_box = document.getElementById('alert_box');

       if (fld.value == "") {
          input_div.className += ' has-error'; 
          alert_box.style.display = 'block';
          alert_box.innerHTML = "You didn't enter a password";
          return false;
       } 

       return true;
    }