JQuery Effect Example

  1. <html>  
  2.   
  3. <head>  
  4.     <title></title>  
  5.     <script src="Scripts/jquery-2.1.1.js" type="text/javascript"></script>  
  6.     <script type="text/javascript">  
  7.     $(document)  
  8.         .ready(function()  
  9.         {  
  10.             $("#btnShow")  
  11.                 .prop("disabled", true);  
  12.             var c = $(this)  
  13.                 .click();  
  14.             if (c == "#btnShow")  
  15.                 $("#btnShow")  
  16.                 .click(function()  
  17.                 {  
  18.                     $("#btnShow")  
  19.                         .prop("disabled", true);  
  20.                     $("#btnHide")  
  21.                         .prop("disabled", false);  
  22.                     $("#img1")  
  23.                         .show(2000);  
  24.                 });  
  25.             else if (c == "#btnHide")  
  26.                 $("#btnHide")  
  27.                 .click(function()  
  28.                 {  
  29.                     $("#btnShow")  
  30.                         .prop("disabled", false);  
  31.                     $("#btnHide")  
  32.                         .prop("disabled", true);  
  33.                     $("#img1")  
  34.                         .hide(2000);  
  35.                 });  
  36.             else  
  37.                 $("#btnToggel")  
  38.                 .click(function()  
  39.                 {  
  40.                     $("#btnShow")  
  41.                         .prop("disabled", true);  
  42.                     $("#btnHide")  
  43.                         .prop("disabled", true);  
  44.                     $("#img1")  
  45.                         .toggle(5000);  
  46.                 });  
  47.             $("#btnFadeIn")  
  48.                 .click(function()  
  49.                 {  
  50.                     $("#img1")  
  51.                         .fadeIn(3000);  
  52.                 });  
  53.             $("#btnFadeOut")  
  54.                 .click(function()  
  55.                 {  
  56.                     $("#img1")  
  57.                         .fadeOut(3000);  
  58.                 });  
  59.             $("#btnFadeToggle")  
  60.                 .click(function()  
  61.                 {  
  62.                     $("#img1")  
  63.                         .fadeToggle(3000);  
  64.                 });  
  65.             $("#btnFadeTo")  
  66.                 .click(function()  
  67.                 {  
  68.                     $("#img1")  
  69.                         .fadeTo(3000, 0.2);  
  70.                 });  
  71.             $("#btnSlideUp")  
  72.                 .click(function()  
  73.                 {  
  74.                     $("#img1")  
  75.                         .slideUp(3000);  
  76.                 });  
  77.             $("#btnSlideDown")  
  78.                 .click(function()  
  79.                 {  
  80.                     $("#img1")  
  81.                         .slideDown(3000);  
  82.                 });  
  83.             $("#btnSlideToggle")  
  84.                 .click(function()  
  85.                 {  
  86.                     $("#img1")  
  87.                         .slideToggle(3000);  
  88.                 });  
  89.         });  
  90.     </script>  
  91.     <style type="text/css">  
  92.     #img1 {  
  93.         width: 300px;  
  94.         height: 300px;  
  95.         border: 5px solid green;  
  96.     }  
  97.     </style>  
  98. </head>  
  99.   
  100. <body>  
  101.     <form id="form1" runat="server">  
  102.         <div align="center">  
  103.             <input type="button" id="btnShow" value="Show" />    
  104.             <input type="button" id="btnHide" value="Hide" />    
  105.             <input type="button" id="btnToggel" value="Toggel" />    
  106.             <input type="button" id="btnFadeIn" value="FadeIn" />    
  107.             <input type="button" id="btnFadeOut" value="FadeOut" />    
  108.             <input type="button" id="btnFadeToggle" value="FadeToggle" />    
  109.             <input type="button" id="btnFadeTo" value="FadeTo" />    
  110.             <input type="button" id="btnSlideUp" value="SlideUp" />    
  111.             <input type="button" id="btnSlideDown" value="SlideDown" />    
  112.             <input type="button" id="btnSlideToggle" value="SlideToggel" />  
  113.             <br />  
  114.             <br />  
  115.             <img id="img1" src="images/mk3.jpg" />  
  116.         </div>  
  117.     </form>  
  118. </body>  
  119.   
  120. </html>