jQuery: Effects/Methods

In our last article, jQuery Part, we covered the basic understanding and now we will move to methods or effects available in jQuery.

Hide/Show/Toggle Methods

The most used methods are Hide/Show. From the last tutorial, we already know how to select an element of our page. Then, if we are successful, we just have to call hide() or show() method as required. Do not forget to include the jQuery library file.

<script type="text/&lt;span class=">// <![CDATA[
javascript</span>" src="/jquery/jquery-1.7.1.min.js">
// ]]></script>

<script type="text/&lt;span class=">// <![CDATA[
javascript</span>" language="javascript">
// ]]></script>

$(document).ready(function() {
$("#btn").click(function ()
{
$("div").show();
});
&nbsp;
$(".btnclass").click(function ()
{
$("p").hide();
});
});
&lt;/script&gt;

Explanation

On click of a button which has ID “btn”, all the div elements in the page will not be visible to the user.

On click of a button having CSS class “.btnclass”, all the paragraph elements in the page will be visible to the user.

Note: Though there is no parameter mentioned for Hide/Show methods in the above example, still we have some liberty provided by jQuery in terms of optional parameters like:

• $(selector).hide(speed,callback);
• $(selector).show(speed,callback);

Here, ‘speed’ is the string which can take predefined values like “slow”, “normal”, or “fast” or we can customize it by specifying the milliseconds running time of animation. For example:

$("p").hide(1000);

And, ‘callback’ represents the function which will be executed, once the show/hide animation completes. In the below code, ‘event’ function is called as a callback and it will show all the div element of the page.

function event (){
$("div").show();
}
$("p").hide(1000, event);

One more method related to show/hide is toggle(). Let's see what it does:

$("#btn").click(function(){
$("#label1").toggle();
});

Well, it is not difficult to deduce that on click of a button with ID “btn”, label1 appearance toggles, if it is in visible state, it gets hidden and vice versa. Similar to Hide/Show methods, toggle also contains the same optional parameters “speed” and “callback”.

Fade Methods

I suppose we all know the dictionary meaning of fade and that is the exact feature used by these methods.

So what are the animations we have related to Fade?

• fadeIn(): An invisible element would start appearing in fade mode
• fadeOut(): A visible element would begin diminishing in fade mode
• fadeToggle(): It performs both of the operations described above
• fadeTo(): Element fades to a given opacity (value between 0 and 1)

We will try to save time here by providing quick examples as the base would remain the same.

$("#btn").click(function(){
$("#label1").fadeIn();
$("#label2").fadeOut("slow");
$("#label3").fadeToggle();
$("#label4").fadeTo("1000",0.5);
});

We mentioned two optional parameters “speed” and “callback” and their use. These two parameters are applicable to our fade methods also. There is an exception in case of fadeTo() method as it contains one more parameter to pass ‘opacity’.

We have few more methods like:

Slide Methods

There is no need to define a self describing entity. Here, we have options like:

• slideDown(): Element slides down
• slideUp(): Element slides up
• slideToggle(): Perform both the operations

As there is no difference in the concept and the only difference exists in the element behavior, we will leave this as an exercise for users.

Well, there are more custom animations that exist which can be used for a better user experience but the concepts explained above will be applicable to all. Wait for the next article, we will explore more in jQuery.

Related Posts

1. UI: Jquery is JavaScript Library
2. JavaScript rendered content is not crawlable
3. C#: Useful JSON in .NET