Javascript 如何将加载动画添加到按钮？_Javascript_Html_Animation_Loading

Javascript 如何将加载动画添加到按钮？

javascript html animation

Javascript 如何将加载动画添加到按钮？,javascript,html,animation,loading,Javascript,Html,Animation,Loading,我对JavaScript非常陌生，我需要帮助在检查按钮上添加加载动画，因此当用户单击检查按钮时，加载动画将在提交按钮滑下之前延迟一段时间 <!DOCTYPE html> <html> <head> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script> </head&g

我对JavaScript非常陌生，我需要帮助在检查按钮上添加加载动画，因此当用户单击检查按钮时，加载动画将在提交按钮滑下之前延迟一段时间

<!DOCTYPE html>
    <html>

    <head>
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
    </head>

    <body>

        <p>Click the "Check" button to unhide Submit Button</p>

        <div id="myDIV">
            CLICK CHECK BUTTON.
            <button onclick="myFunction()">Check</button>
        </div>

        <div id="mynewDIV">
            SUBMIT BUTTON.
            <button>Submit</button>
        </div>

        <script>
            var x = document.getElementById('mynewDIV');
            x.style.display = 'none';

            function myFunction() {
                var y = document.getElementById('myDIV');
                $("#myDIV").slideUp(1000);
                y.style.display = 'none';

                var y = document.getElementById('mynewDIV');
                $("#mynewDIV").slideDown(1000);
                y.style.display = 'block';

            }
        </script>

    </body>

    </html>


单击“检查”按钮取消隐藏提交按钮
单击“检查”按钮。
检查
提交按钮。
提交
var x=document.getElementById（'mynewDIV'）；
x、 style.display='none'；
函数myFunction（）{
var y=document.getElementById（'myDIV'）；
美元（“#myDIV”）。slideUp（1000）；
y、 style.display='none'；
var y=document.getElementById（'mynewDIV'）；
$（#mynewDIV”）。向下滑动（1000）；
y、 style.display='block'；
}


单击“检查”按钮取消隐藏提交按钮

单击“检查”按钮。
检查
提交按钮。
提交
var x=document.getElementById（'mynewDIV'）；
x、 style.display='none'；
var img=document.getElementById（'loading'）；
img.style.display='none'；
函数myFunction（）{
var y=document.getElementById（'myDIV'）；
$（“#myDIV”）.slideUp（“slow”，function（）{
y、 style.display='none'；
var img=document.getElementById（'loading'）；
img.style.display='block'；
});
var y=document.getElementById（'mynewDIV'）；
$（“#mynewDIV”）.delay（3000）.slideDown（“slow”，function（）{
var img=document.getElementById（'loading'）；
img.style.display='none'；
y、 style.display='block'；
});
}

“我已经搜索了整个互联网”不，不，你没有。除非

幻灯片

和

延迟

的JQuery文档突然在互联网之外，否则你没有搜索

整个互联网

如我所述，请的可能副本，我不知道如何将您链接到我的代码集成到我的代码中。如果你能抽出几分钟的时间复制我的小代码，请帮我在“检查”按钮上实现加载动画。我会非常棒。@HarrysonDaniels，等等，我正在做。@HarrysonDaniels，你想详细地告诉我，当用户点击

中的检查按钮时，检查按钮上会出现一个spiner动画，显示内容正在加载，之前，

内容将在几秒钟后向下滑动。兄弟，非常感谢您的努力。检查按钮被延迟，但不幸的是，在提交滑落之前，没有脊椎动画告诉用户它正在加载。如果可以，请帮我添加这个。

<!DOCTYPE html>
    <html>

    <head>
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
    </head>

    <body>

 <p>Click the "Check" button to unhide Submit Button</p>
<div id="loading">
  <p><img src="https://upload.wikimedia.org/wikipedia/commons/b/b1/Loading_icon.gif" />
</div>
<div id="myDIV">
    CLICK CHECK BUTTON.
    <button onclick="myFunction()">Check</button>
</div>

<div id="mynewDIV">
    SUBMIT BUTTON.
    <button>Submit</button>
</div>

<script>
            var x = document.getElementById('mynewDIV');
    x.style.display = 'none';

    var img = document.getElementById('loading');
    img.style.display = 'none';

    function myFunction() {
                   var y = document.getElementById('myDIV');
            $("#myDIV").slideUp("slow", function(){
              y.style.display = 'none';
              var img = document.getElementById('loading');
              img.style.display = 'block';
            });

            var y = document.getElementById('mynewDIV');
            $("#mynewDIV").delay(3000).slideDown("slow", function(){
              var img = document.getElementById('loading');
              img.style.display = 'none';
              y.style.display = 'block';
             });

        }
</script>


    </body>

    </html>