0

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

HTML：

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

查询：

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

   });

谢谢！

4

6 回答 6

2

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

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

   });
于 2013-07-05T13:05:58.160 回答
1

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

于 2013-07-05T13:08:20.677 回答
0

虽然 JQuery 解决方案非常简单，但我会研究 CSS3 动画。它们比内置的淡入淡出功能要流畅得多。

于 2013-07-05T13:12:12.663 回答
0

添加内联显示：无；.loading 元素的样式并从函数中删除 css("display","none")

于 2013-07-05T13:09:16.683 回答
0

像这样改变。

$("#act").click(function() {
$(".loading").css("display", "block").css("opacity", "0");
$(".loading").fadeIn("slow");
});
于 2013-07-05T13:05:50.373 回答
0

您可以直接使用毫秒进行淡入

$(".loading").fadeIn(2000);// this will fadin in 2 seconds
于 2013-07-05T13:06:20.077 回答