jQuery Effects

The effects used in jQuery are probably the cool effects that you have seen on others’ websites. They are extremely powerful and actually require a sizable amount of JavaScript if you were to write it without using the jQuery effects. It is important to understand how these effects work so that you have a greater knowledge of JavaScript. Often, we find ourselves looking for the easy solution, but in fact, it is usually the hard way that teaches us the lessons and concepts that we should know.

If you saw the example in the events, our example will look very familiar.

<button id="button1">Hide</button>
<button id="button2">Show</button>
<ul id="someList">
    <li>
        Item 1
    </li>
    <li>
        Item 2
    </li>
</ul>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script type="text/javascript">
    $("#button1").click(function()
    {
        $('#someList li:first').hide();
    });
    $("#button2").click(function()
    {
        $('#someList li:first').show();
    });
</script>

Pretty awesome, huh? We are using the different ids of the buttons to run the jQuery function that we want. We use two effects here, hide and show to change the visibility of the first <li> in our <ul> with an id of someList. Obviously, the hide effect is the one that makes the element invisible, and the show effect makes the element visible.

More Common Effects

• animate() – changes a set of CSS properties with the option to animate the changes.
• fadeIn() – animates the element from hidden to visible
• fadeOut() – animates the element from visible to hidden
• slideDown() – animates the change of the elements height from hidden to visible
• slideUp() – animates the change of the elements height from visible to hidden
• toggle() – alternatives between show and hide effects

One quick note here. We could have only used one button in the example above if we used toggle instead of hide and show. Remember, effects are your friend. Also, don’t forget to use jQuery’s official reference guide at jQuery Effects.