Lesson 8 – Visual Effects

jQuery is a powerful tool to create different types of visual effects as well. You do not need a lot of coding and configuration to achieve these effects. jQuery provides a rather simple but effective platform to make your webpage visually more pleasing and attractive to the eyes.

For instance, it is particularly easy to show and hide elements using jQuery. All you have to do is to write show() and hide() commands to show and hide an element respectively. It is as simple as that. Take a look at the following example.

<!DOCTYPE html>
<html lang="en">
<head>
    <title>Events</title>
    [block]0[/block]

    
      $(document).ready(function () {
        $('.show').click(function () {
           $('div').show(500);
        });

        $('.hide').click(function () {
           $('div').hide(500);
        });
      });
    

  <style>
     div {
        height: 100px;
        width: 100px;
        border-radius: 100px;
        background-color: #333;
        color: #fff;
        border: 1px solid #ccc;
        padding: 30px 30px
     }

     input {
        margin-top: 50px;
        margin-left: 10px;
     }
  </style>
</head>

<body>   
  
I am a circle
<input type="button" class="hide" value="Hide"> <input type="button" class="show" value="Show"> </body> </html>

In the above example, we try to hide and then show the div element. We create this effect by clicking on the input which will trigger the click event. The browser detects the event and executes the associated function that is “show” or “hide” in this case. The 500 used as a parameter in the show() and hide() functions is actually the total time (in milliseconds) the effect will take to complete.

You can also toggle between the hidden and displayed state of an element without using input buttons. In this case, the element will be displayed if it is initially hidden and vice versa.

In the example below, we toggle a simple div element containing an image.

<!DOCTYPE html>
<html lang="en">
<head>
    <title>Events</title>
    [block]1[/block]

    
      $(document).ready(function () {
       $('.clickMe').click(function (event) {
        $('.img').toggle('slow', function () {

        });
       });
      });
    

  <style>
     .clickMe {
        height: 100px;
        width: 100px;
        background-color: #333;
        color: #fff;
        border: 1px solid #ccc;
     }

     img {
        width: 200px;
        height: 200px;
        margin-top: 50px;
     }
  </style>
</head>

<body>   
  
Click me to see the magic
</body> </html>

Now, the image will toggle between its hidden and visible state when you click on the box.

In the next lesson, we will study jQuery widgets.