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>

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

1 个答案: