Question

我的代码中存在问题。我正在尝试显示加载动画（我有.gif格式）。唯一的问题是，当我点击按钮时，动画显示的时间不到一秒，它就会消失。我做错了什么？

HTML：

<form action="" method="post">
 <button id="act">Click me</button>
</form>
<div class="loading"></div><!--my Animation-->

Jquery的：

   $(function() {
    $(".loading").css("display","none");
    $("#act").click(function() {
         $(".loading").fadeIn("slow");
    });

   });

谢谢！

Answer 1

您将停止提交按钮的默认操作（提交表单），您需要将e参数添加到该功能并停止默认操作。

 $(function() {
    $(".loading").css("display","none");
    $("#act").click(function(e) {
         e.preventDefault(); //This will stop it.
         $(".loading").fadeIn("slow");
    });

   });

Answer 2

我不完全确定，但我认为显示器，没有人给你带来麻烦。相当硬编码到css中，并在必要时将其作为$（“。loading”）。show（）或hide（）。首先单击显示，然后您可以选择何时隐藏以及何时手动显示。更灵活。

Answer 3

这样改变。

$("#act").click(function() {
$(".loading").css("display", "block").css("opacity", "0");
$(".loading").fadeIn("slow");
});

Answer 4

你可以直接使用毫秒来实现fadeIn

$(".loading").fadeIn(2000);// this will fadin in 2 seconds

Answer 5

添加内联显示：无; .loading元素的样式，并从函数

中删除css（“display”，“none”）

Answer 6

虽然JQuery解决方案非常简单，但我会研究CSS3动画。它们比内置的fadein功能更加流畅。

fadeIn点击按钮

6 个答案: