Click here to Skip to main content
13,189,324 members (66,119 online)
Click here to Skip to main content
Add your own
alternative version


3 bookmarked
Posted 17 Dec 2012

jQuery: Effects/Methods

, 17 Dec 2012
Rate this:
Please Sign up or sign in to vote.
Methods or effects available in jQuery

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 ()
$(".btnclass").click(function ()


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:


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 (){
$("p").hide(1000, event);

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


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.


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


This article, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)


About the Author

Himanshu DS
Web Developer
India India
I am a regular developer working on c#,,sql,cms,digital marketing related sites. Through my blog, I am showing the non-technical part of our daily technical terms and processes which can be used to describe it to a layman.Sometimes I write basic technical posts also.

You may also be interested in...


Comments and Discussions

-- There are no messages in this forum --
Permalink | Advertise | Privacy | Terms of Use | Mobile
Web03 | 2.8.171016.2 | Last Updated 17 Dec 2012
Article Copyright 2012 by Himanshu DS
Everything else Copyright © CodeProject, 1999-2017
Layout: fixed | fluid