在 div 之间转换时显示加载图标

Question

我有一个表单，当单击 "Next" 按钮时，会出现一个新的 div 代替旧的 div，代码如下：

function showDiv() {
                   
                    
                    
                    document.getElementById('2').style.display="block";
                    document.getElementById('1').style.display="none";
                   
                    
                }

然后，一旦提交了表单，我就会将我的数据发送到服务器，以便通过电子邮件将其发送给我。问题是之前的动作，即单击按钮后 div 秒之间的转换，执行得太快了。人们告诉我，使用某种过渡或快速加载图标看起来会好很多，但它看起来并不真实。

有什么办法可以让我的第二个div "slide"进入新的位置吗？还是某种过渡？请记住，这只是将两个 div 换成另一个。尚未处理实际数据，也未加载新页面。或者有什么方法可以在这个动作上创建一个持续 1 秒的加载图标？

感谢您的帮助。

Answer 1

我假设您愿意根据您的标签使用 jQuery。 jQuery 提供了多种动画 div 更改的方法。 .animate() 提供了一种制作自定义动画的方法，或者您可以使用提供的选项之一。在您的情况下，也许像 .fadeToggle() 这样的东西会起作用吗？

详细信息在这里：https://api.jquery.com/category/effects/

Answer 2

试试这个

// send data
// show loading gif
setTimeout(function () {
     // hide loading gif
     // show other div
}, 2000);

这样会延迟 2 秒。希望对你有帮助。

在 div 之间转换时显示加载图标

Display loading icon when transitioning between divs

html

javascript

css

jquery

transition