JavaScript slidedown（）

[在此处输入图像描述][1]我需要在此函数“ShowDiv”中修改哪些内容才能设置动画。cntc div显示SUP缓慢向下滑动时的示例

function toggle(ele) {
    var cont = document.getElementById('cntc');
    if (cont.style.display == 'block') {
        cont.style.display = 'none';
        document.getElementById(ele.id).value = 'Show DIV';
    }
    else {
        cont.style.display = 'block';
        document.getElementById(ele.id).value = 'Hide DIV';
    }
}

---

更多详情：

---

html文件：

    <div id = 'Contact'>
    <a href = '#' value = 'Show Div' onclick = "toggle(this);" class = 'btnForm'><i class="fas fa-envelope-open-text"></i></a>
    <form id = 'cntc' style = 'display:none' action="https://formspree.io/f/moqpwpwp" method="POST">
        <table class = 'tbl'>
            <tr>
                <td><label text="_replyto">Email</label></td>
                <td><input id = 'frmName' type = 'text'><button name = 'submit' class = 'btnSubmit' type="submit" target = '_blank'>Send</button></td>
                
            </tr>
            <tr>
                <td><label text="message">Message</label></td>
                <td><textarea id = 'frmMessageBox'  name = 'message' cols = '40' rows = '3'></textarea></td>
            </tr>
        </table>
    </form>
</div>

}

---

[url]=https://ibb.co/99xx4rJ][img]https://i.ibb.co/nsXX1LT/ss.png[/img][/url]

您可以使用Jquery动画功能平滑地滚动到div

功能切换（ele）{
var cont=document.getElementById（'cntc'）；
如果（cont.style.display=='block'）{
cont.style.display='none'；
document.getElementById（ele.id）.value='showdiv'；
}
否则{
cont.style.display='block'；
document.getElementById（ele.id）.value='Hide DIV'；
$（'html，body'）。设置动画({
scrollTop:$（“#cntc”）.offset（）.top}，
“慢”）；
}
}

#主页{
宽度：100%；
高度：1000px；
背景：#ccc；
}
#cntc{
宽度：100%；
高度：1000px；
背景：#999；
}

您好

您可以在css中使用转换。这里有一个有效的解决方案

var container=document.getElementById（“cntc”）；
功能切换（el）{
container.classList.toggle（'hide'）；
el.innerText=container.classList.contains（'hide'）？'Show DIV'：'hide DIV'；
}

.box{
宽度：450px；
高度：100px；
溢出：隐藏；
背景：#D8E9F8；
过渡：所有0.4缓进缓出；
}
.隐藏{
身高：0；
}

电子邮件
发送
消息

是否要在两个

div之间切换显示/隐藏？例如，如果隐藏了
x
，是否显示
y
？或者当滚动显示
y
时，
x
位于屏幕顶部时？还是别的什么？对不起，我想我没有回答这个问题。这对我不起作用。单击后，表单首先显示，但转换不起作用。@Maryan I更新了我的答案：）。请再看一次。它现在可以解决你的问题，不需要卷轴。表单显示正确，我只是想平滑地显示。您的意思是在显示表单时需要像淡入效果一样显示吗？
function toggle(ele) {
var cont = document.getElementById('cntc');
if (cont.style.display == 'block') {
    cont.style.display = 'none';
    document.getElementById(ele.id).value = 'Show DIV';
}
else {
    cont.style.display = 'block';
    document.getElementById(ele.id).value = 'Hide DIV';
}