Saturday, September 21, 2019

jQuery UI Effect

The effect() method is used to apply an animation effect to the element without having to show or hide it. It is one of the method which is used to manage jQuery UI visual effects.

Syntax:

  1. .effect( effect [, options ] [, duration ] [, complete ] )   
Parameters of effect() method:

  • Effect: This parameter specifies the effects which are used for transition.
  • Options: This is used for specifying the specific setting and easing for the effects. Each effect has its own set of options.
  • Duration: This specifies the time duration and indicates the number of milliseconds of the effect. Its default value is 400.
  • Complete: It is a callback method. It is called for each element when the effect is completed for the elements.
Most used jQuery UI effects:
Add table:
EffectDescription
BlindShows or hides the element in the manner of a window blind: by moving the bottom edge down or up, or the right edge to the right or left, depending upon the specified direction and mode.
BounceCauses the element to appear to bounce in the vertical or horizontal direction, optionally showing or hiding the element.
ClipShows or hides the element by moving opposite borders of the element together until they meet in the middle, or vice versa.
ExplodeShows or hides the element by splitting it into multiple pieces that move in radial directions as if imploding into, or exploding from, the page.
DropShows or hides the element by making it appear to drop onto, or drop off of, the page.
FadeShows or hides the element by adjusting its opacity. this is the same as the core fade effects, but without options.
FoldShows or hides the element by adjusting opposite borders in or out, and then doing the same for the other set of borders.
HighlightCalls attention to the element by momentarily changing its background color while showing or hiding the element.
PuffExpands or contracts the element in place while adjusting its opacity.
ShakeShakes the element back and forth, either vertically or horizontally.
ScaleExpands or contracts the element by a specified percentage.
PulsateAdjusts the opacity of the element on and off before ensuring that the element is shown or hidden as specified.
SizeResizes the element to a specified width and height. similar to scale except for how the target size is specified.
SlideMoves the element such that it appears to slide onto or off of the page.
TransferAnimates a transient outline element that makes the element appear to transfer to another element. the appearance of the outline element must be defined via css rules for the ui-effects-transfer class, or the class specified as an option.

jQuery Shake effect example 1

1. Shake effect:
Let's take an example to specify the shake effect.
  1. <!DOCTYPE html>  
  2. <html lang="en">  
  3. <head>  
  4.       <meta charset="utf-8">  
  5.       <title>jQuery UI effect Example</title>  
  6.       <link href="http://code.jquery.com/ui/1.10.4/themes/ui-lightness/jquery-ui.css" rel="stylesheet">  
  7.       <script src="http://code.jquery.com/jquery-1.10.2.js"></script>  
  8.       <script src="http://code.jquery.com/ui/1.10.4/jquery-ui.js"></script>  
  9.       <!-- CSS -->  
  10.       <style>  
  11.          #box-1 {  
  12.             height: 50px;  
  13.             width: 100px;  
  14.             background: #7fffd4;  
  15.          }  
  16.       </style>  
  17.       <script>  
  18.          $(document).ready(function() {  
  19.             $('#box-1').click(function() {  
  20.                $( "#box-1" ).effect( "shake", {  
  21.                   times: 10,  
  22.                   distance: 150  
  23.                }, 3000, function() {  
  24.                $( this ).css( "background", "#ff4040" );  
  25.             });  
  26.          });  
  27.       });  
  28. </script>  
  29. </head>  
  30. <body>  
  31. <div id="box-1">Click here to<br/><b>Shake Me!</b></div>  
  32. </body>  
  33. </html>  

jQuery Bounce Effect example 2

2. Bounce Effect:
Let's take an example to specify the bounce effect.
  1. <!DOCTYPE html>  
  2. <html lang="en">  
  3. <head>  
  4.       <meta charset="utf-8">  
  5.       <title>jQuery UI effect Example</title>  
  6.       <link href="http://code.jquery.com/ui/1.10.4/themes/ui-lightness/jquery-ui.css" rel="stylesheet">  
  7.       <script src="http://code.jquery.com/jquery-1.10.2.js"></script>  
  8.       <script src="http://code.jquery.com/ui/1.10.4/jquery-ui.js"></script>  
  9.       <!-- CSS -->  
  10.       <style>  
  11.          #box-1 {  
  12.             height: 50px;  
  13.             width: 100px;  
  14.             background: #7fffd4;  
  15.          }  
  16.       </style>  
  17.       <script>  
  18.          $(document).ready(function() {  
  19.             $('#box-1').click(function() {  
  20.                $( "#box-1" ).effect( "bounce", {  
  21.                   times: 10,  
  22.                   distance: 150  
  23.                }, 3000, function() {  
  24.                $( this ).css( "background", "#ff4040" );  
  25.             });  
  26.          });  
  27.       });  
  28. </script>  
  29. </head>  
  30. <body>  
  31. <div id="box-1">Click here to<br/><b>Bounce Me!</b></div>  
  32. </body>  
  33. </html>  

jQuery Explode Effect example 3

3. Explode Effect:
Let's take an example to specify the explode effect.
  1. <!DOCTYPE html>  
  2. <html lang="en">  
  3.    <head>  
  4.       <meta charset="utf-8">  
  5.       <title>jQuery UI effect Example</title>  
  6.       <link href="http://code.jquery.com/ui/1.10.4/themes/ui-lightness/jquery-ui.css" rel="stylesheet">  
  7.       <script src="http://code.jquery.com/jquery-1.10.2.js"></script>  
  8.       <script src="http://code.jquery.com/ui/1.10.4/jquery-ui.js"></script>  
  9.       <!-- CSS -->  
  10.       <style>  
  11.          #box-2 {  
  12.             height: 100px;  
  13.             width: 100px;  
  14.             background: #7fffd4;  
  15.          }  
  16.       </style>  
  17.       <script>  
  18.          $(document).ready(function() {  
  19.             $('#box-2').click(function() {  
  20.                $( "#box-2" ).effect({  
  21.                   effect: "explode",  
  22.                   easing: "easeInExpo",  
  23.                   pieces: 16,  
  24.                   duration: 2000  
  25.                });  
  26.             });  
  27.          });  
  28.       </script>  
  29.    </head>  
  30.    <body>  
  31.       <div id="box-2">Click here to<br/><b>Explode Me!</b></div>  
  32.    </body>  
  33. </html>  

jQuery Blind Effect example 4

4. Blind Effect:
Let's take an example to specify the blind effect.
  1. <!DOCTYPE html>  
  2. <html lang="en">  
  3.    <head>  
  4.       <meta charset="utf-8">  
  5.       <title>jQuery UI effect Example</title>  
  6.       <link href="http://code.jquery.com/ui/1.10.4/themes/ui-lightness/jquery-ui.css" rel="stylesheet">  
  7.       <script src="http://code.jquery.com/jquery-1.10.2.js"></script>  
  8.       <script src="http://code.jquery.com/ui/1.10.4/jquery-ui.js"></script>  
  9.       <!-- CSS -->  
  10.       <style>  
  11.          #box-2 {  
  12.             height: 100px;  
  13.             width: 100px;  
  14.             background: #7fffd4;  
  15.          }  
  16.       </style>  
  17.       <script>  
  18.          $(document).ready(function() {  
  19.             $('#box-2').click(function() {  
  20.                $( "#box-2" ).effect({  
  21.                   effect: "blind",  
  22.                  duration:0  
  23.               });  
  24.             });  
  25.          });  
  26.       </script>  
  27.    </head>  
  28.    <body>  
  29.       <div id="box-2">Click here to<br/><b>Blind Me!</b></div>  
  30.    </body>  
  31. </html>  

jQuery Clip Effect example 5

5. Clip Effect:
Let's take an example to specify the clip effect:
  1. <!DOCTYPE html>  
  2. <html lang="en">  
  3.    <head>  
  4.       <meta charset="utf-8">  
  5.       <title>jQuery UI effect Example</title>  
  6.       <link href="http://code.jquery.com/ui/1.10.4/themes/ui-lightness/jquery-ui.css" rel="stylesheet">  
  7.       <script src="http://code.jquery.com/jquery-1.10.2.js"></script>  
  8.       <script src="http://code.jquery.com/ui/1.10.4/jquery-ui.js"></script>  
  9.       <!-- CSS -->  
  10.       <style>  
  11.          #box-2 {  
  12.             height: 100px;  
  13.             width: 100px;  
  14.                        background: #7fffd4;  
  15.          }  
  16.       </style>  
  17.       <script>  
  18.          $(document).ready(function() {  
  19.             $('#box-2').click(function() {  
  20.                $( "#box-2" ).effect({  
  21.                   effect: "clip",  
  22.                 duration: 2000  
  23.                });  
  24.             });  
  25.          });  
  26.       </script>  
  27.    </head>  
  28.    <body>  
  29.       <div id="box-2">Click here to<br/><b>Clip Me!</b></div>  
  30.    </body>  
  31. </html>  

jQuery Drop Effect example 6

6. Drop Effect:
Let's take an example to specify the drop effect:
  1. <!DOCTYPE html>  
  2. <html lang="en">  
  3.    <head>  
  4.       <meta charset="utf-8">  
  5.       <title>jQuery UI effect Example</title>  
  6.       <link href="http://code.jquery.com/ui/1.10.4/themes/ui-lightness/jquery-ui.css" rel="stylesheet">  
  7.       <script src="http://code.jquery.com/jquery-1.10.2.js"></script>  
  8.       <script src="http://code.jquery.com/ui/1.10.4/jquery-ui.js"></script>  
  9.       <!-- CSS -->  
  10.       <style>  
  11.          #box-2 {  
  12.             height: 100px;  
  13.             width: 100px;  
  14.                        background: #7fffd4;  
  15.          }  
  16.       </style>  
  17.       <script>  
  18.          $(document).ready(function() {  
  19.             $('#box-2').click(function() {  
  20.                $( "#box-2" ).effect({  
  21.                   effect: "drop",  
  22.                });  
  23.             });  
  24.          });  
  25.       </script>  
  26.    </head>  
  27.    <body>  
  28.       <div id="box-2">Click here to<br/><b>Drop Me!</b></div>  
  29.    </body>  
  30. </html>  

jQuery Fade effect example 7

7. Fade effect:
Let's take an example to specify the fade effect:
  1. <!DOCTYPE html>  
  2. <html lang="en">  
  3.    <head>  
  4.       <meta charset="utf-8">  
  5.       <title>jQuery UI effect Example</title>  
  6.       <link href="http://code.jquery.com/ui/1.10.4/themes/ui-lightness/jquery-ui.css" rel="stylesheet">  
  7.       <script src="http://code.jquery.com/jquery-1.10.2.js"></script>  
  8.       <script src="http://code.jquery.com/ui/1.10.4/jquery-ui.js"></script>  
  9.       <!-- CSS -->  
  10.       <style>  
  11.          #box-2 {  
  12.             height: 100px;  
  13.             width: 100px;  
  14.                        background: #7fffd4;  
  15.          }  
  16.       </style>  
  17.       <script>  
  18.          $(document).ready(function() {  
  19.             $('#box-2').click(function() {  
  20.                $( "#box-2" ).effect({  
  21.                   effect: "fade",  
  22.                });  
  23.             });  
  24.          });  
  25.       </script>  
  26.    </head>  
  27.    <body>  
  28.       <div id="box-2">Click here to<br/><b>Fade Me!</b></div>  
  29.    </body>  
  30. </html>  

jQuery Fold Effect example 8

8. Fold Effect:
Let's take an example to specify fold effect:
  1. <!DOCTYPE html>  
  2. <html lang="en">  
  3.    <head>  
  4.       <meta charset="utf-8">  
  5.       <title>jQuery UI effect Example</title>  
  6.       <link href="http://code.jquery.com/ui/1.10.4/themes/ui-lightness/jquery-ui.css" rel="stylesheet">  
  7.       <script src="http://code.jquery.com/jquery-1.10.2.js"></script>  
  8.       <script src="http://code.jquery.com/ui/1.10.4/jquery-ui.js"></script>  
  9.       <!-- CSS -->  
  10.       <style>  
  11.          #box-2 {  
  12.             height: 500px;  
  13.             width: 500px;  
  14.                        background: #7fffd4;  
  15.          }  
  16.       </style>  
  17.       <script>  
  18.          $(document).ready(function() {  
  19.             $('#box-2').click(function() {  
  20.                $( "#box-2" ).effect({  
  21.                   effect: "fold",  
  22.                   duration: 5000  
  23.                });  
  24.             });  
  25.          });  
  26.       </script>  
  27.    </head>  
  28.    <body>  
  29.       <div id="box-2">Click here to<br/><b>Fold Me!</b></div>  
  30.    </body>  
  31. </html>  

jQuery Highlight Effect example 9

9. Highlight Effect:
Let's take an example to specify the highlight effect.
  1. <!DOCTYPE html>  
  2. <html lang="en">  
  3.    <head>  
  4.       <meta charset="utf-8">  
  5.       <title>jQuery UI effect Example</title>  
  6.       <link href="http://code.jquery.com/ui/1.10.4/themes/ui-lightness/jquery-ui.css" rel="stylesheet">  
  7.       <script src="http://code.jquery.com/jquery-1.10.2.js"></script>  
  8.       <script src="http://code.jquery.com/ui/1.10.4/jquery-ui.js"></script>  
  9.       <!-- CSS -->  
  10.       <style>  
  11.          #box-2 {  
  12.             height: 100px;  
  13.             width: 100px;  
  14.                        background: #7fffd4;  
  15.          }  
  16.       </style>  
  17.       <script>  
  18.          $(document).ready(function() {  
  19.             $('#box-2').click(function() {  
  20.                $( "#box-2" ).effect({  
  21.                   effect: "highlight",  
  22.                  duration:2000  
  23.                });  
  24.             });  
  25.          });  
  26.       </script>  
  27.    </head>  
  28.    <body>  
  29.       <div id="box-2">Click here to<br/><b>Highlight Me!</b></div>  
  30.    </body>  
  31. </html>  

jQuery Puff Effect example 10

10. Puff Effect:
Let's take an example to specify puff effect.
  1. <!DOCTYPE html>  
  2. <html lang="en">  
  3.    <head>  
  4.       <meta charset="utf-8">  
  5.       <title>jQuery UI effect Example</title>  
  6.       <link href="http://code.jquery.com/ui/1.10.4/themes/ui-lightness/jquery-ui.css" rel="stylesheet">  
  7.       <script src="http://code.jquery.com/jquery-1.10.2.js"></script>  
  8.       <script src="http://code.jquery.com/ui/1.10.4/jquery-ui.js"></script>  
  9.       <!-- CSS -->  
  10.       <style>  
  11.          #box-2 {  
  12.             height: 100px;  
  13.             width: 100px;  
  14.                        background: #7fffd4;  
  15.          }  
  16.       </style>  
  17.       <script>  
  18.          $(document).ready(function() {  
  19.             $('#box-2').click(function() {  
  20.                $( "#box-2" ).effect({  
  21.                   effect: "puff",  
  22.                 duration:5000  
  23.                });  
  24.             });  
  25.          });  
  26.       </script>  
  27.    </head>  
  28.    <body>  
  29.       <div id="box-2">Click here to<br/><b>Puff Me!</b></div>  
  30.    </body>  
  31. </html>  

jQuery Scale effect example 11

11. Scale effect:
Let's take an example to specify scale effect.
  1. <!DOCTYPE html>  
  2. <html lang="en">  
  3. <head>  
  4.   <meta charset="utf-8">  
  5.   <title>scale demo</title>  
  6.   <link rel="stylesheet" href="//code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css">  
  7.   <style>  
  8.   #toggle {  
  9.     width: 100px;  
  10.     height: 100px;  
  11.     background: #7fffd4;  
  12.   }  
  13.   </style>  
  14.   <script src="//code.jquery.com/jquery-1.10.2.js"></script>  
  15.   <script src="//code.jquery.com/ui/1.11.4/jquery-ui.js"></script>  
  16. </head>  
  17. <body>  
  18. <p>Click anywhere to toggle the box.</p>  
  19. <div id="toggle"></div>  
  20. <script>  
  21. $( document ).click(function() {  
  22.   $( "#toggle" ).toggle( "scale" );  
  23. });  
  24. </script>  
  25. </body>  
  26. </html>  

jQuery Pulsate Effect example 12

12. Pulsate Effect:
Let's take an example to specify the pulsate effect.
  1. <!DOCTYPE html>  
  2. <html lang="en">  
  3.    <head>  
  4.       <meta charset="utf-8">  
  5.       <title>jQuery UI effect Example</title>  
  6.       <link href="http://code.jquery.com/ui/1.10.4/themes/ui-lightness/jquery-ui.css" rel="stylesheet">  
  7.       <script src="http://code.jquery.com/jquery-1.10.2.js"></script>  
  8.       <script src="http://code.jquery.com/ui/1.10.4/jquery-ui.js"></script>  
  9.       <!-- CSS -->  
  10.       <style>  
  11.          #box-2 {  
  12.             height: 100px;  
  13.             width: 100px;  
  14.                        background: #7fffd4;  
  15.          }  
  16.       </style>  
  17.       <script>  
  18.          $(document).ready(function() {  
  19.             $('#box-2').click(function() {  
  20.                $( "#box-2" ).effect({  
  21.                   effect: "pulsate",  
  22.                 duration:5000  
  23.                });  
  24.             });  
  25.          });  
  26.       </script>  
  27.    </head>  
  28.    <body>  
  29.       <div id="box-2">Click here to<br/><b>Pulsate Me!</b></div>  
  30.    </body>  
  31. </html>  

jQuery Size Effect example 13

13. Size Effect:
Let's take an example to resize the box.
  1. <!DOCTYPE html>  
  2. <html lang="en">  
  3. <head>  
  4.   <meta charset="utf-8">  
  5.   <title>scale demo</title>  
  6.   <link rel="stylesheet" href="//code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css">  
  7.   <style>  
  8.   #toggle {  
  9.     width: 100px;  
  10.     height: 100px;  
  11.     background: #7fffd4;  
  12.   }  
  13.   </style>  
  14.   <script src="//code.jquery.com/jquery-1.10.2.js"></script>  
  15.   <script src="//code.jquery.com/ui/1.11.4/jquery-ui.js"></script>  
  16. </head>  
  17. <body>  
  18. <p>Click anywhere to toggle the size of the box.</p>  
  19. <div id="toggle"></div>  
  20. <script>  
  21. $( document ).click(function() {  
  22.   $( "#toggle" ).toggle( "size" );  
  23. });  
  24. </script>  
  25. </body>  
  26. </html>  

jQuery Slide Effect example 14

14. Slide Effect:
Let's take an example to specify the slide effect:
  1. <!DOCTYPE html>  
  2. <html lang="en">  
  3.    <head>  
  4.       <meta charset="utf-8">  
  5.       <title>jQuery UI effect Example</title>  
  6.       <link href="http://code.jquery.com/ui/1.10.4/themes/ui-lightness/jquery-ui.css" rel="stylesheet">  
  7.       <script src="http://code.jquery.com/jquery-1.10.2.js"></script>  
  8.       <script src="http://code.jquery.com/ui/1.10.4/jquery-ui.js"></script>  
  9.       <!-- CSS -->  
  10.       <style>  
  11.          #box-2 {  
  12.             height: 100px;  
  13.             width: 200px;  
  14.                        background: #7fffd4;  
  15.          }  
  16.       </style>  
  17.       <script>  
  18.          $(document).ready(function() {  
  19.             $('#box-2').click(function() {  
  20.                $( "#box-2" ).effect({  
  21.                   effect: "slide",  
  22.                  duration:1000  
  23.                });  
  24.             });  
  25.          });  
  26.       </script>  
  27.    </head>  
  28.    <body>  
  29.       <div id="box-2">Click here to<br/><b>Slide Me!</b></div>  
  30.    </body>  
  31. </html>  
at

No comments:

Post a Comment

Subscribe to: Post Comments (Atom)

How to register multiple implementations of the same interface in Asp.Net Core?

 Problem: I have services that are derived from the same interface. public interface IService { } public class ServiceA : IService { ...