Click here to Skip to main content
Click here to Skip to main content

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 method 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 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 customized it by specifying the milliseconds running time of animation.For ex:

$("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(), lets see what it does,

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

Well, it is not difficult to deduce that on click of 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 method.

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 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. This 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 only difference exists in the element behavior, we will leave this as an exercise for users.

Well, There are more custom animation exists 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 crawl able.
  3. C#: Useful JSON in .NET

License

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

Share

About the Author

Himanshu DS
Web Developer CodeSpread.com
India India
I am a regular developer working on c#,asp.net,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.
Follow on   Twitter

Comments and Discussions

 
-- There are no messages in this forum --
| Advertise | Privacy | Mobile
Web04 | 2.8.140827.1 | Last Updated 17 Dec 2012
Article Copyright 2012 by Himanshu DS
Everything else Copyright © CodeProject, 1999-2014
Terms of Service
Layout: fixed | fluid