JQuery guide for beginner’s part 6 – Showing and Hiding the Elements with JQuery | Lessoncup Programming Blog

Sunday, 27 October 2013

JQuery guide for beginner’s part 6 – Showing and Hiding the Elements with JQuery

HI, in previous lesson we worked on JQuery Events, now we are going to work on how to showing and hiding the elements, In jquery we have few methods to show and hide the html elements, .hide() method is use to hiding the html elements, .show() method is use to showing the html elements, .toggle() method is show and hide the html elements like collapse and expand.


To hiding the elements

$(document).ready(function(){

$("#myElement").hide("slow");

});

To showing the elements

$(document).ready(function(){

$("#myElement").show("slow");

});

To showing/hiding the elements

$("#myElement").toggle("slow", function() { 


});

Remember that the "toggle" command will change whatever state the element currently has, and the parameters are both optional. The first parameter indicates the speed of the showing/hiding. If no speed is set, it will occur instantly, with no animation. A number for "speed" represents the speed in milliseconds. The second parameter is an optional function that will run when the command is finished executing.

You can also specifically choose to fade an element in or out, which is always done by animation:

$("#myElement").fadeOut("slow", function() { 

// do something when fade out finished 

}

$("#myElement").fadeIn("fast", function() { 

// do something when fade in finished

}

To fade an element only partially, either in or out: 

$("#myElement").fadeTo(2000, 0.4, function() { 

// do something when fade is finished 

}

The second parameter (0.4) represents "opacity", and is similar to the way opacity is set in CSS. Whatever the opacity is to start with, it will animate (fadeTo) until it reaches the setting specified, at the speed set (2000 milliseconds). The optional function (called a "callback function") will run when the opacity change is complete. This is the way virtually all callback functions in jQuery work.

No comments :

Post a Comment

Mohammad Khasim
Blogger | Web Developer
Hyderabad - INDIA
lessoncup@gmail.com

PHP | My SQL | JQUERY
Web Development Tools | CMS | Frameworks | SEO

Get my Latest Lessons