jQuery: Effects/Methods

jquery
jquery

jQuery: Effects/Methods

In our last article, jQuery Part 1 , 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.

Author: hershey

A passion for knowledge drives me to do programming, A passion for programming drives me to create something different, A passion for creation drives me to spread the knowledge.

Share This Post On

0 Comments

  1. nice superb explaination

    Post a Reply
  2. thanks for the tutorial
    I am having a problem.
    The feature “Create SQL server database” isn’t available , I can’t select it.
    Can you help, please ?

    Post a Reply

Submit a Comment

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>

More from CodeSpread:

  • UI: Jquery is Javascript LibraryUI: Jquery is Javascript LibraryJquery Basics: With the title itself, anybody can deduce that we are indirectly talking about javascript only. So, we can say that Javascipt is the guardian of Jquery. These are client end technol...
  • RegisterStartupScript, RegisterOnSubmitStatementRegisterStartupScript, RegisterOnSubmitStatementWe have discussed RegisterClientScriptBlock, RegisterClientScriptInclude in our previous article here. There are two more methods to client script dynamically from server side. We will discuss thes...
  • Release of jQuery 1.11.0/2.1.0 Beta 2 Release of jQuery 1.11.0/2.1.0 Beta 2 We have latest news from jQuery desk. On Nov 15th2013, jQuery official site announced the release of  jQuery 1.11.0/2.1.0 Beta 2. These bets versions can be downloaded from the below mentioned li...
  • 20 Dec: Must Read Codes [6-10]20 Dec: Must Read Codes [6-10]We are sharing few must read codes/concepts which are required now and then. Each of these codereads doesn’t require a full length descriptive article so combining them into groups of five. CodeRe...
  • Styles of Source Code Comments in C#, SQL, XML, HTML, CSS, JavaScriptStyles of Source Code Comments in C#, SQL, XML, HTML, CSS, JavaScriptDevelopers take months to write beautiful pieces of code and reviewer gets only few hours or I say, minutes to provide suggestions and improvisations. Then it becomes a hard deal for a developer to...
  • RegisterClientScriptBlock, RegisterClientScriptIncludeRegisterClientScriptBlock, RegisterClientScriptInclude"Current trends are more inclined towards the client model for a better UI experience where small pieces of client script are integrated into the application." These client scripts can be declarat...
  • User Interface DesignUser Interface DesignWhat is a User Interface? Webopedia says “Abbreviated UI, the junction between a user and a computer program. An interface is a set of commands or menus through which a user communicates with a pr...
  • Java script rendered content is not crawl able.Java script rendered content is not crawl able.There was a requirement to include 'ratings and reviews' plugin on the product pages of our website which is provided by a third party. We included a javascript library and some code as provided by...