如何为按钮添加加载动画？

Question

我是 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>

Answer 1

<!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>

如何为按钮添加加载动画？

How to add a loading animation to button?

html

javascript

animation

loading