14 - jQuery UI Effects

Introduction

jQuery UI offer a number of effects which you can add to different elements on your webpage so that your webpage becomes more attractive and interesting. You can hide or show your elements, animate your elements, and so on with different effects.

Effects

Let’s see different effects that you can apply to your elements one by one.

  1. blind à This effect hides or shows an element by wrapping it in a container.
  2. bounce à This effect hides or shows an element by bouncing in the vertical or horizontal direction.
  3. clip à This effect clips the element vertically or horizontally.
  4. drop à This effect fades in/out the element sliding in a direction.
  5. explode à This effect hides or shows an element by splitting into pieces.
  6. fade à This effect shows or hides an element by adjusting its opacity.
  7. fold à This effect adjusts opposite borders in or out.
  8. highlight à This effect hides or shows an element by animating its background color.
  9. puff à This effect expands or contracts the element.
  10. pulsate à This effect hides or shows an element by adjusting the opacity on and off.
  11. scale à This effect shrinks or grows an element by a percentage factor.
  12. shake à This effect shake the element vertically or horizontally multiple times.
  13. size à This effect resizes an element to a specified height and width.
  14. slide à This effect slides the element out of the viewport.

You can apply these effects on methods including show, hide, toggle and so on. You could find the complete list of effects and effect specific settings at http://api.jqueryui.com/category/effects/. You could find the different easing options at http://api.jqueryui.com/easings/.

Add reference to the required jQuery UI files before trying these code samples.

Hide

You can hide the selected elements using effects such as bounce, shake, explode, fold and so on.

The syntax of hide method is

$(selector).hide(effect, options, duration, complete);

All the four parameters are optional. The effect is the name of the effect with which you want to hide the element. The options parameter is an object indicating effect specific settings and easing. The duration option sets the time period in which the animation should be complete. The last parameter is a callback method that will be called when the effect is complete.

Try this yourself:

<!DOCTYPE html>
  <html>
   <head>
    <title>Sample Code</title>
    <link href="http://code.jquery.com/ui/1.10.4/themes/ui-lightness/jquery-ui.css" rel="stylesheet">
    <script src="jquery.js"></script>
    <script src="jquery-ui.min.js"></script>
    <style>
      #box
      {
       width:200px;
       height:200px;
       background-color:pink;
       font-size:20px;
      }
   </style>
   <script type="text/javascript">
     $(document).ready(function(){
     $("#btnHide").click(function(){
     $("#box").hide(2000);
     });
     });
   </script>
  </head>
  <body>
   <div id="box">I’m going to be invisible!!!</div><br />
   <button id="btnHide">Hide</button>
  </body>
</html>

Save the file as hiding.html and open it using your browser. You will get a screen like this:


            

Click the Hide button and the box will be hidden.

Now delete the lines of code inside the $( document).ready and try the numbered code snippets given below one by one. Do not forget to run your webpage after copying each code snippet.

1.    $("#btnHide").click(function(){
$("#box").hide("blind", 1000);
});

2.    $("#btnHide").click(function(){
$("#box").hide("bounce", {distance:30}, 2000);
});

3.    $("#btnHide").click(function(){
$("#box").hide("clip", {easing:"swing"}, "slow");
});

4.    $("#btnHide").click(function(){
$("#box").hide("explode", {pieces:4}, 3000, completed);
});
function completed()
{
alert("Exploded into 4 pieces");
}

5.    $("#btnHide").click(function(){
$("#box").hide("fold", {horizFirst:true}, 5000);
});

6.    $("#btnHide").click(function(){
$("#box").hide("highlight", {color:"purple"}, 2000, callback);
});
function callback()
{
         alert("The box will be displayed again!!!");
$("#box").show({color:"pink"}, 2000);
}

7.    $("#btnHide").click(function(){
$("#box").hide("puff", {percent:200}, 3000);
});

8.    $("#btnHide").click(function(){
$("#box").hide("pulsate", {times:8}, 3000);
});

9.    $("#btnHide").click(function(){
$("#box").hide("shake", {direction:"right", times:5}, 3000);
});

10.    $("#btnHide").click(function(){
$("#box").hide("slide", {direction:"up", easing:"easeInQuint"}, "slow");
})

Show

You can show the hidden elements using effects such as bounce, slide, shake, explode, fold, puff and so on.

The syntax of show method is

$(selector).show(effect, options, duration, complete);

All the four parameters are optional. The effect is the name of the effect with which you want to show the element. The options parameter is an object indicating effect specific settings and easing. The duration option sets the time period in which the animation should be complete. The last parameter is a callback method that will be called when the effect is complete.

Try this yourself:

<!DOCTYPE html>
<html>
  <head>
   <title>Sample Code</title>
   <link href="http://code.jquery.com/ui/1.10.4/themes/ui-lightness/jquery-ui.css" rel="stylesheet">
   <script src="jquery.js"></script>
   <script src="jquery-ui.min.js"></script>
   <style>
     #box
     {
      width:200px;
      height:200px;
      background-color:pink;
      }
   </style>
    <script type="text/javascript">
      $(document).ready(function(){
      $("#box").hide();
      $("#btnShow").click(function(){
      $("#box").show();
      });
      });
    </script>
  </head>
  <body>
   <div id="box"></div><br />
   <button id="btnShow">Show</button>
  </body>
</html>

Save the file as showing.html and open it using your browser. Click the Show button and the box will become visible.

Now delete the lines of code inside the $( document).ready and try the numbered code snippets given below one by one. Do not forget to run your webpage after copying each code snippet.

1.    $("#box").hide();
$("#btnShow").click(function(){
$("#box").show({effect:"drop", duration:2000});
});
2.    $("#box").hide();
$("#btnShow").click(function(){
$("#box").show("scale", {direction:"vertical", percent:100, scale:"content"}, 4000);
});

3.    $("#box").hide();
$("#btnShow").click(function(){
$("#box").show("size", {to: { width: 280, height: 285 }}, 3000, completed);
});
function completed()
{
alert("Resized before showing!!!");
}
4.    $("#box").hide();
$("#btnShow").click(function(){
$("#box").show("fold", {size:10, easing:"swing"}, 4000);
});
5.    $("#box").hide();
$("#btnShow").click(function(){
$("#box").show("explode", 4000);
}); 

Toggle

You can show the hidden elements and hide the displayed elements using toggle method. In other words, toggle method toggle the hide() and show() methods based on whether the element is hidden or shown and you can apply different effects such as bounce, slide, shake, explode, fold, puff and so on during hiding and showing.

The syntax of toggle method is same as that of hide() and show() methods.

$(selector).toggle(effect, options, duration, complete);

Try this yourself:

<!DOCTYPE html>
<html>
<head>
<title>Sample Code</title>
<link href="http://code.jquery.com/ui/1.10.4/themes/ui-lightness/jquery-ui.css" rel="stylesheet">
<script src="jquery.js"></script>
<script src="jquery-ui.min.js"></script>
<style>
#box
{
    width:200px;
    height:200px;
    background-color:pink;
}
</style>
<script type="text/javascript">
$(document).ready(function(){
$("#btnToggle").click(function(){
$("#box").toggle();
});
});
</script>
</head>
<body>
<div id="box"></div><br />
<button id="btnToggle">Toggle</button>
</body>
</html> 

Save your file as toggling.html and open it using your browser. Click the Toggle button once to hide the element and click it again to show it.

Now delete the lines of code inside the $(document).ready and try the numbered code snippets given below one by one. Do not forget to run your webpage after copying each code snippet and to click the button twice to see the effect.

1.    $("#btnToggle").click(function(){
$("#box").toggle("bounce", {distance:30, times:6}, 3000);
});

2.    $("#btnToggle").click(function(){
$("#box").toggle("clip", {direction:"horizontal"}, 3000);
});

3.    $("#btnToggle").click(function(){
$("#box").toggle("explode", {pieces:4}, 3000);
});

4.    $("#btnToggle").click(function(){
$("#box").toggle("fold", completed);
});
function completed()
{
alert("The element is folded!!!");
}

5.    $("#btnToggle").click(function(){
$("#box").toggle("fade", 2000);
});

6.    $("#btnToggle").click(function(){
$("#box").toggle("puff", {percent:200}, 3000);
});

Color Animation

You can apply different color animations using the animate method and a number of properties such as backgroundColor, borderTopColor, borderBottomColor, borderLeftColor, borderRightColor, color and outlineColor.

Try this yourself:

<!DOCTYPE html>
<html>
  <head>
    <title>Sample Code</title>
    <link href="http://code.jquery.com/ui/1.10.4/themes/ui-lightness/jquery-ui.css" rel="stylesheet">
    <script src="jquery.js"></script>
    <script src="jquery-ui.min.js"></script>
    <style>
     #box
     {
       width:200px;
       height:200px;
       background-color:pink;
       color: purple;
       font-size:30px;
       border: 2px solid fuchsia; 
       margin:10px;
      }
   </style>
   <script type="text/javascript">
     $(document).ready(function(){
     $("#btnColor").click(function(){
     $("#box").animate({
     backgroundColor: "#66FFFF",
     borderTopColor: "00CCFF",
     borderBottomColor: "00CCFF",
     borderLeftColor: "blue",
     borderRightColor: "blue",
     color: "purple",
     outlineColor: "gray",
     width:300,
     height:300
     }, 2000);
     });
     });
   </script>
  </head>
  <body>
    <div id="box">Welcome!!!</div><br />
    <button id="btnColor">Color Animate</button>
  </body>
</html>

Save the file as coloranimation.html and open it using your browser. You will get a screen like this:

      

Click the button and you will get an output like this:

           

Add Class, Remove Class, Toggle Class and Switch Class

You can create CSS classes and then add, remove or toggle those classes to animate your elements. The methods used to add, remove and toggle classes to HTML elements are addClass, removeClass and toggleClass. You can also switch from one CSS class to another using switchClass method.

The syntax of these methods are as follows:

addClass

addClass (className, duration, easing, complete);

removeClass

removeClass (className, duration, easing, complete);

toggleClass

toggleClass (className, duration, easing, complete);

The first parameter is a required parameter and the remaining three parameters are optional. The className is the name of the class to be added, removed or toggled. The duration option sets the time period in which the animation should be complete. The easing indicates the way to progress in the effect. The last parameter is a call back method that will be called when the effect is complete.

switchClass

switchClass (removeClassName, addClassName, duration, easing, complete);

The removeClassName is the class to be removed and addClassName is the class to be added.

Try this yourself:

<!DOCTYPE html>
<html>
<head>
<title>Sample Code</title>
<link href="http://code.jquery.com/ui/1.10.4/themes/ui-lightness/jquery-ui.css" rel="stylesheet">
<script src="jquery.js"></script>
<script src="jquery-ui.min.js"></script>
<style>
. InitialBox
{
    width:200px;
    height:200px;
    background-color:pink;
    border:2px solid fuchsia;
}
.animatedBox
{
    background-color: purple;
    width:300px;
    height:300px;
}
.switchedBox
{
    
    background:aqua;
    width:400px;
    height:400px;
    border:3px dotted blue;
}
</style>
<script type="text/javascript">
$(document).ready(function(){
$("#btnAdd").click(function(){
    $(".initialBox").addClass("animatedBox", 4000);
});
$("#btnRemove").click(function(){
    $(".initialBox").removeClass("animatedBox", 2000);
});
$("#btnToggle").click(function(){
    $(".initialBox").toggleClass("animatedBox", 2000);
});
$("#btnSwitch").click(function(){
    $(".animatedBox").switchClass("animatedBox", "switchedBox", 5000);
    $(".switchedBox").switchClass("switchedBox", "animatedBox", 5000);
});
});
</script>
</head>
<body>
<div id="box" class="initialBox"></div><br />
<button id="btnAdd">Add Class</button>
<button id="btnRemove">Remove Class</button>
<button id="btnToggle">Toggle Class</button><br /><br />
<div id="box1" class="animatedBox"></div><br />
<button id="btnSwitch">Switch Class</button>
</body>
</html>

Try clicking the Add Class button and Remove Class button once to see the effect. We have added the animatedBox class using addClass method and removed the same class using removeClass method. If you click the Toggle Class button twice, you could find that the effect gets toggled. If you click the Switch Class method, the animatedClass gets switched to a new class named switchedBox.

Like us on Facebook