jQuery的淡入淡出似乎不起作用

Question

我正在嘗試添加一個在按下按鈕時淡入/淡出的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開始淡入/淡出，但只是閃爍了一個毫秒。

Answer 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>

Answer 2

采用

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

它會慢慢消失

Answer 3

指定.fadeToggle()的持續時間。 默認值為400，這非常快。 .fadeToggle(1000)將花費一秒鍾。