JQuery UI Effect

We have earlier how JQuery can be used to create fade, slide, hide and show effects. However, core JQuery effects are limited. For instant what if you want an element to bounce up and down or shake left right? To achieve such functionalities in JQuery, custom JavaScript coding is required. On the flip side, JQuery UI contains built in functionalities to achieve such effects. JQuery UI Effect functions can create fancy animations such as bounce affect, explode effect, slide effect, shade effect etc. To implement an effect via JQuery, simply call the effect() function on the element on which you want to create effect. The parameters to the effect function specify the type and behavior of the effect.

JQuery UI Bounce Effect

Let’s explain JQuery UI effect function with the help of an example. The following code contains a circular div which bounces up and down on button click. Take a look at the following code.

<!DOCTYPE html>
<html>
   <head>
      <title>JQuery UI Bounce Affect</title>
          <link href="https://code.jquery.com/ui/1.12.0/themes/ui-lightness/jquery-ui.css" rel="stylesheet">
      <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.0.0/jquery.min.js"></script>
    <script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/jquery-ui.min.js"></script> 

      <script>
           
         $(document).ready(function() {

            $("#btn").click(function(){
               $(".circle").effect(
                   "bounce", 
                   {times:6,
                   distance:500},
                   2000 );
            });

         });
      </script>
       
       <style>
           .circle{
               width: 200px;
               height: 200px;
               background-color: aqua;
               border-radius: 100%;
               margin: 0 auto;
           }
       </style>
       
   </head>
   <body>

      <button id = "btn"> Bounce the circle </button>

      <div class = "circle">
        
      </div>
  
   </body>
</html>

Download Code Run Code

Open the above page in the browser, you should see a circle with color aqua color at the middle of the page. You should also see a button at the top left. When you click the button, the circle should bounce six times. The distance traveled upward before the first bounce should be 500px.

Now, look at the script area of the webpage in the header section. Upon the button click, JQuery calls JQuery UI effect function on the div. The first parameter to the effect function is the type of effect which is “bounce” in this case. The second parameter is a pair of curly brackets. Inside these brackets the first attribute specifies the number of times the div should bounce i.e, while the second attribute specifies the distance traveled in pixels in the first bounce. You can also have a third optional parameter which is a callback function. Using the same technique, you can create, shake, slide, explode and other JQuery UI effects.

<<< JQuery UI Color AnimationJQuery UI Add Class >>>
Copyright 2005-2016 KnowledgeHills. Privacy Policy. Contact .