淡入淡出按钮单击

我的代码存在问题。我想显示一个加载动画（我有.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"); 
    }); 

    });

谢谢！

来源

2013-07-05 Or Amranov

而不是“慢”尝试给一个像3000这样的值..这将是毫秒......所以给一个相应的值。 –

像这样变化。

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

来源

2013-07-05 13:05:50 user10

你会停供透过按钮的默认操作（submiting形式），你需要的e参数添加到功能和停止默认操作。

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

    });

来源

2013-07-05 13:05:58 Skatox

我正要准备一个小提琴后发布这个 - [这是一个工作示例]（http://jsfiddle.net/umjUN/）。 – freejosh

非常感谢！帮助了我很多！ –

不客气:)然后选择这个作为答案。 – Skatox

可以用毫秒为淡入直接

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

来源

2013-07-05 13:06:20

我不能完全肯定，但我认为显示，没有一个是给你的麻烦。相当困难的编码到CSS中，并将其作为$（“。loading”）。show（）或hide（）在必要时使用。首先点击显示，然后您可以选择何时隐藏以及何时手动显示。更灵活。

来源

2013-07-05 13:08:20 Delrog

.show（）或.hide（）是动画的问题。我想他想要一个fadeIn（）效果。 –

你可以尝试使用Bhushan Kawadkar所说的时间播放，或者在需要时只使用隐藏效果和fadeIn（毫秒）。 – Delrog

添加内联显示：无;样式为.loading元素并从函数中删除css（“display”，“none”）

来源

2013-07-05 13:09:16

虽然JQuery解决方案非常简单，但我会考虑CSS3动画。它们比内置的淡入淡出功能更平滑。

来源

2013-07-05 13:12:12 user2550807

淡入淡出按钮单击

回答

相关问题