jquery淡入淡出似乎不起作用

时间:2013-06-19 13:44:27

标签: jquery asp.net fade

当我按下按钮时,我正在尝试添加淡入/淡出的div。这是我的ASP头中的代码:

<script type="text/javascript">
   $(this.document).ready(function () {
      $("#<%=this.button1.ClientID %>").click(function () {
         $("#mydiv").fadeToggle();
      });
   });
</script>

然后又在体内:

<asp:Button ID="button1" runat="server" Text="button" />

<div id="mydiv" style="display:none">
Load page with fade in effect...<br />
Load page with fade in effect...<br />
Load page with fade in effect...<br />
Load page with fade in effect...<br />
Load page with fade in effect...<br />
Load page with fade in effect...<br />
Load page with fade in effect...<br />
Load page with fade in effect...<br />
Load page with fade in effect...<br />
Load page with fade in effect...<br />
Load page with fade in effect...<br />
Load page with fade in effect...<br />
Load page with fade in effect...<br />
</div>

当我测试时,按钮就在那里,但按下它时没有任何反应。当我SPAM重复按下它时,我可以看到div开始淡入/淡出,但只是闪烁一毫秒。

3 个答案:

答案 0 :(得分:1)

该按钮始终回发,因此您没有看到javascript正在运行,因为您的网页已重新加载。

您可以使用return false;preventDefault()来避免回复并查看客户端副作用。

<script type="text/javascript">
   $(this.document).ready(function () {
      $("#<%=this.button1.ClientID %>").click(function (event) {
         // not let it make post back
         event.preventDefault();

         $("#mydiv").fadeToggle();
      });
   });
</script>

答案 1 :(得分:0)

使用

$("selector").fadeToggle("slow", "linear");

它会慢慢消失

答案 2 :(得分:0)

指定.fadeToggle()的持续时间。默认值为400,非常快。 .fadeToggle(1000)需要一秒钟。