jQuery Basic Effects

Friday, July 6, 2012

jQuery supports a variety of methods that can be used to create animation effects. Creating effects using jQuery is rapidly growing and there are many web designers out there who have created some amazing combinations and effects you have never thought possible using jQuery. Of course, if you are new to jQuery, you'll need to learn some basics first. In this tutorial, we are going to cover some basic effects using methods such as hide(), show(), and toggle().



speedOptional values in milliseconds, "slow", "normal", and "fast".
callbackAn optional function to run after the method is completed

HTML Example

We will use the following HTML for the examples listed below.

<!DOCTYPE html>
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript">
  // ... jQuery Code ...
<img id="img1" src="show.png" />  
<img id="img2" src="hide.png" /> 
<img id="img3" src="collapse.png" />  
<div id="div1"> <!-- Some Content --> </div>


In the following example, we will use the click event to show, hide, and toggle the div element adjacent to the images. You will also notice that we modify the source attribute of img3 when the div element is either in a show or hidden state. Click on the various icons below to show, hide, and toggle the div element.

<script type="text/javascript">
   $("#img3").attr("src", "collapse.png");
   $("#img3").attr("src", "show.png");
 $("#img3").click(function () {
    var $img = $("#img3")
    if ($img.attr("src") == "expand.png") {
    $img.attr("src", "collapse.png");
    } else {
    $img.attr("src", "expand.png");

show close toggle
Click the icons to show, hide, or toggle this element.

Did you find the page informational and useful? Share it using one of your favorite social sites.

Recommended Books & Training Resources

HTML CSS and JavaScript Editor Pro jQuery JavaScript and jQuery: The Missing Manual