Click here to check my latest exciting videos on youtube
Search Mallstuffs

Flag Counter
Spirituality, Knowledge and Entertainment


Locations of visitors to this page


Latest Articles


Move to top
Manipulating Elements and Animations Using Jquery
Posted By Sarin on May 04, 2012     RSS Feeds     Latest Hinduism news
3337 Views

Hiding Elements with JQuery
The .hide() method sets the inline style attribute of the matched set of elements to display:none. Hide function remembers the value of the display property-typically block or inline-before it was changed to none. The examples in this section show you how to hide an element using a variety of selectors and events.
  
Hiding an element by type with a button
The following example shows how to hide everything inside <div> on click of a button
1. Create a Web page containing the following code:
<html>
<head>
<title>My Test Page</title>
    <script src="jquery-1.6.4.min.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function() {
$(':submit').click(function ()  {
$('div').hide();
});
});
</script>
</head>
<body>
<div>My Name is sarin. i will hide this on click of submit button</div>
<div>My Name is sarin. i will hide this on click of submit button</div>
<input value="Hide" type="submit">
</body>
</html>

This code contains two <div> elements and a button.
  
2. Save the file, and then view it in your browser. Output will be as shown below:
  
  
3. Add the following JQuery function to hide all div elements
  
$(':submit').click(function ()  {
$('div').hide();
});
This code will hide all div elements
  
5. Save this file, and then view it in your browser. Click the button to see the output as shown below
  
  
Both <div> elements are now hidden. when you clicked the button, all the div elements are hidden. In real development scenarios, this rarely will be the case and there will be need to hide only a specific div element.
You can assign an id to div element and then can use that id to hide only that particular div element

6) Add the id to the div element as shown below.
<div id="first">My Name is sarin. i will hide this on click of submit button</div>
7) Add the input button and JQuery code which will be executed on click of this button, to hide the above div element  
<input value="Hide first" type="button"/>

$(':button').click(function ()  {
    $('#first').hide();
});

8. Save this file, and then view it in your browser. Click the button to see the output as shown below
  
Using this keyword to hide an element
Whenever you are using the JQuery function, if we want to do some action on the element which is the same element on which this JQuery event function is defined, then we can use this keyword to represent that element
Ex:
Suppose that we have a button with id ‘btnhide’ and we want to hide this element on its own click event, then we can use keyword this instead of using button id  
$('#btnHide').click(function ()  {
    $(‘#btnHide').hide();
});
i.e. above code can be written using the this keyword as
$('#btnHide').click(function ()  {
    $(this).hide();
});
  
);
10. You can also set the speed of hiding and showing events so as to produce a animated effect.
When we include a speed with .show() or .hide(), it becomes animated-occurring over a specified period of time. The .hide('speed') method, for example, will decrease an element's height, width, and opacity simultaneously until all three reach zero, at which point the CSS rule display:none is applied.  
  
JQuery has two predefined speeds - slow and fast. We can use a number, representing the number of milliseconds for the animation to happen. For example, if I want a very slow animation, we can replace
  
$(this).hide('slow');  with  $(this).hide(1000);
Note : Omit quotes while using a numeric value.  
You can see the hiding animation in the output shown below:
  
  
Till now, we saw only about hiding. Let see a few example on show function, which is exactly opposite of that of hide function.
The show() method restores the matched set of elements to whatever visible display property they had before display: none was applied.
11. Add a JQuery function to show all divs and a button to call this jquery function
$('#btnShow').click(function ()  {
    $('div').hide();
});
  
<input id="btnShow" value="Show All" type="button"/>

“When this button is clicked, all the div element will be shown including the ones which has been hidden by the previous events.

12. Save this file, and then view it in your browser. Hide any element and then click show button
$('#btnShow').click(function ()  {
    $('div').show();
});
  
Animation effects as seen in hide function can also be seen in show function.  I.e. above show function can also be written as   $('div').show(1000);  to show animation effects.
The .show('speed') method will increase the element's height from top to bottom, width from left to right, and opacity from 0 to 1 until its contents are completely visible.
With any jQuery effect, we can use any one of three speeds: slow, normal, and fast. Using .show('slow') would make the show effect complete in .6 seconds, .show('normal') in .4 seconds, and .show('fast') in .2 seconds.  
13. We can also have callback function to the hide and show events.
Callback functions are functions which will be executed when the events have completed.
For Ex: we can have a callback function to alert the user that hiding event is completed.
  
        $('#btnHide').click(function ()  {
            $(this).hide('slow', function ()  {
                alert('Button is hidden now');
            });
        });

14. We can use toggle function to Performs show () on any hidden wrapped elements and hide () on any non-hidden wrapped elements.  
      $('#btnToggle').click(function ()  {
            $('div').toggle(500);
        });

<input id="btnToggle" value="Toggle" type="button"/>

We have added a toggle button and a JQuery function which will be called on click of this button

On click of toggle button, top two divs are hidden and the output is as follows:.
  
on again clicking toggle button, hidden divs are shown back and the output is same as the original  
  
So, three different effects functions are summarized as follows:
Function   Parameter Return Value Description
hide(speed,callback) speed (Number|String) Optionally specifies the duration of the effect as a number of milliseconds or as one of the predefined strings: slow, normal, or fast. If omitted, no animation takes place, and the elements are  immediately removed callback (Function) An optional function invoked when the animation completes. No parameters are passed to this function, wrapped set Causes the elements in the wrapped set to become hidden. If called with no parameters, the operation takes place instantaneously by setting the display style property value of the elements to none. If a speed parameter is provided, the elements are hidden over a period of time by adjusting their size and opacity downward to zero, and at the end, their display style property value is set to none to remove them from the display.  
show(speed,callback) Same as above wrapped set Causes any hidden elements in the wrapped set to be revealed. If called with no parameters, the operation takes place instantaneously by setting the display style property value of the Elements to their previous setting (such as block or inline) if the element was hidden via a JQuery effect. If the element was not hidden via JQuery, the display style property value defaults to block. If a speed parameter is provided, the elements are revealed over a specified duration by Adjusting their size and opacity upward. An optional callback can be specified that’s invoked when the animation is complete.  
toggle(speed,callback) Same as above Wrapped set. Performs show () on any hidden wrapped elements and hide () on any non-hidden wrapped elements.


here

Share this to your friends. One of your friend is waiting for your share.
Share on Google+ Share on Tumblr Print Browser Favorite
Related Articles
Get Set Value of any HTML element using jquery-Val function
Select Groups of similar elements using position selector
Manipulating Elements and Animations Using Jquery
Simple Ajax client server Example
Animation Effects using Ajax AnimationExtender Control
Working with Ajax collapsible panel
Calling web service asynchronously using jquery ajax
JQuery FAQ and Jquery Effects
create new controls in grid view at runtime
Select Parent, Child, sibling,descendants HTML element using jquery

Post Comment