Top 10 Functions In JQuery

Nitin Pandit
8y
17.2k
0
4

100

Article

Here I am discussing the top ten functions of jQuery.

hide() function
show() function
toggle() function
slideUp() function
slideDown() function
slideToggle() function
fadeOut() function
fadeIn() function
fadeToggle()
animate() function

Now I'll explain the topic.

Hide function

It is used to hide the selected html element in a simple way. As a name it only works in hidden selected element. In jQuery the Hide () method is very useful. By using this method you can hide HTML elements with the hide().
1. <script>
2. // We have to use hide function to hide the element as well.
3. $(‘#hide_jQuery’).click(function(){
4. $(‘# jQuery’).hide();
5. });
6. $(‘#show_ jQuery’).click(function(){
7. $(‘# jQuery’).show();
8. });
10. </script>
11. <div id=”hide_ jQuery”></div>
12. <div id=”show_ jQuery”></div>
13. <div id=” jQuery”></div>
This example, we have created a hide function to hide the selected element. I have created three div tags for this purpose.

Below is the First one, the div tag where we have to click for hiding the jQuery.
1. <div id=”hide_ jQuery”></div>
Show function

It is used to show the selected html element. We can say that these functions work in the opposite in hide function. But before calling this function it must use the hide function on the same element

Example
1. <script>
2. // We have to use hide function to hide the element as well.
3. $(‘#hide_ jQuery’).click(function(){
4. $(‘# jQuery’).hide();
5. });
6. $(‘#show_ jQuery’).click(function(){
7. $(‘# jQuery’).show();
8. });
9. </script>
10. <div id=”hide_ jQuery”></div>
11. <div id=”show_ jQuery”></div>
12. <div id=” jQuery”></div>
Toggle function

It is used to both (hide, show) functions to toggle between for the click event for the selected elements. It means this function is used to hide or show the specific selected element. A toggle functions well compared to hide and show function.

Example
1. <!doctype html>
2. <html lang="en">
4. <head>
5. <meta charset="utf-8">
6. <title>toggle demo</title>
7. <script src="https://code.jquery.com/jquery-1.10.2.js"></script>
8. </head>
10. <body>
11. <button>Toggle</button>
12. <div>Hello</div>
13. <script>
14. $("button").click(function()
15. {
16. $("div").toggle();
17. });
18. </script>
19. </body>
21. </html>
For more details click on link.
SlideUp function

This function is used to slide and show element's up side. It slides the selected elements up and removes it slowly.

Example
1. <script type="text/javascript">
2. $(document).ready(function ()
3. {
4. $("#btnSlideUp").click(function ()
5. {
6. $("#login_wrapper").slideUp();
7. return false;
8. });
9. });
10. </script>
For more details click on link.
SlideDown function

This function is used to slide and hide an element on down side.

Example
1. <script type="text/javascript">
2. $(document).ready(function ()
3. {
4. $("#btnSlideDown").click(function ()
5. {
6. $("#login_wrapper").slideDown();
7. return false;
8. });
9. });
10. </script>
For more details click on link.
SlideToggle function

This method is between slideUp() method and slideDown() method. It shows/hides an element in up/down side.

Example
1. <script type="text/javascript">
2. $(document).ready(function ()
3. { $("#btnSlideToggle").click(function ()
4. {
5. $("#login_wrapper").slideToggle();
6. return false;
7. });
8. });
9. </script>
For more details click on link.
FadeOut Function

The jQuery fadeOut() method fades out a visible element and hides it.

Syntax

$(selector).fadeOut(speed,callback);

Example
1. <script type="text/javascript">
2. $(document).ready(function ()
3. {
4. $("#btnEffect").click(function ()
5. {
6. $("#panelPersonalInfo").fadeOut();
7. $("#panelAddressInfo").fadeOut("slow");
8. $("#panelLoginInfo").fadeOut(4000); //millisecond
9. return false;
10. });
11. });
12. </script>
For more details click on link.
FadeIn function

The jQuery fadeIn() method displays a hidden element by fading it in.

The syntax is

$(selector).fadeIn(speed,callback);

Example
1. <script type="text/javascript">
2. $(document).ready(function ()
3. {
4. $("#btnEffect").click(function ()
5. {
6. $("#panelPersonalInfo").fadeIn();
7. $("#panelAddressInfo").fadeIn("slow");
8. $("#panelLoginInfo").fadeIn(4000); //millisecond
9. return false;
10. });
11. });
12. </script>
For more details click on link.
FadeToggle

The jQuery fadeToggle() method toggles between the fadeIn() and fadeOut() methods. If the page's elements are faded out then fadeToggle() will fade them in and if the elements are faded in then fadeToggle() will fade them out.

Example
1. <script type="text/javascript">
2. $(document).ready(function ()
3. {
4. $("#btnEffect").click(function ()
5. {
6. $("#panelPersonalInfo").fadeToggle();
7. $("#panelAddressInfo").fadeToggle("slow");
8. $("#panelLoginInfo").fadeToggle(4000); //millisecond
9. return false;
10. });
11. });
12. </script>
For more details click on link.
Animate function

In jQuery the animate() method is very useful. By using this method we can change the size of elements. In this example we create a div element which contains an Image; when we move the mouse over the image, the image size will change. First of all you add an image to the application. Add a new form to the application and add the following HTML code to the aspx page.

Example
1. <div style="height: 100px; width: 100px; position: relative">
2. <img src="animate.gif" id="img" />
3. </div>
Now add the following code in the head section.
1. <script type="text/javascript">
2. $(document).ready(function () {
4. $("div").mouseover(function ()//mouseover function will execute when mouse pointer will reach on <div>element
5. {
6. $("img").animate({ height: 300 }, "slow"); //image height will change by using animate method
7. $("img").animate({ width: 300 }, "slow");
8. $("img").animate({ height: 100 }, "slow");
9. $("img").animate({ width: 100 }, "slow");
10. });
11. }
12. );
13. </script>
In the above code we create a mouseover function.
1. $("img").animate({ height: 300 }, "slow"); //image height will change by using animate method
2. $("img").animate({ width: 300 }, "slow");
3. $("img").animate({ height: 100 }, "slow");
4. $("img").animate({ width: 100 }, "slow");
For more details click on link.

Up Next

Ebook Download

View all

Printing in C# Made Easy

Read by 10.8k people

Download Now!

Learn

View all