打开div时，SlideToggle动画是否跳过

如何解决打开div时，SlideToggle动画是否跳过

在我的程序中。我正在尝试创建一个通知框，通知用户有关服务器内发生的不同情况。问题在于通知框只是直接打开并立即关闭，而没有任何动画。我曾尝试更改SlideToggle的速度，但这没什么区别（我将速度更改为100毫秒）。我认为问题可能出在以下事实：我在动画应作用的div上添加了动态JavaScript元素。这是我的代码可能会有所帮助：

<div id="notification_box" class="notify">
     Notifications: 

      <button class="notification_button" id="notification_button">
             <i class="fas fa-chevron-down"></i>
      </button>

      <div id="notification_container" style="display: none;"></div>

</div>

<script>

var notification_box = document.getElementById("notification_box");


$(document).ready(function()
{
    //var notification_message_container = $("body").children;
    $("#notification_button").click(function()
    {
         $("#nofitication_container").slideToggle(100);
    });
}); 

 socket.on("incoming_request",function(sender))//the socket part itself is not the problem its just needed for the code to make self in this case
 {
    var incoming_request_form = make_element("div",undefined,"bg-warning");
     incoming_request_form.style.display = "inline-block";
     incoming_request_form.appendChild(make_element("p",sender + " wants to play a game with you",undefined));
     incoming_request_form.appendChild(make_element("button","accept","bg-success"));
     incoming_request_form.appendChild(make_element("button","deny","bg-danger"));
     notification_box.childNodes[3].appendChild(incoming_request_form);
 }


</script>

让我用代码解释一些小事情：

notification_box.childnodes[1]是按钮

notification_box.childnodes[3]是传入消息的容器。

notification_box.childnodes[3]与$("#notification_container")