jquery fade doesn't seem to work

Question

I'm trying to add a div that fades in/out when i press a button. this is the code in my ASP head:

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

and then this later down in body:

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

When I test it, the button is there but nothing happens when i press it. when i SPAM press it repetedly, i can see the div starting to fade in/out, but just flickering for a milliseccond.

Answer 1

the button is always make post back, so you did not see the javascript running because your page is reloaded.

You can use the return false; or the preventDefault() to avoid the post back and see your client side effect.

<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

use

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

it will fade with slow effect

Answer 3

Specify a duration for .fadeToggle() . The default is 400, which is pretty quick. .fadeToggle(1000) will take a second.