jQuery Effects
jQuery is a Java-script library which is used to enhance the appearance and flow of elements on webpage. It provides us a write less, do more mode in language.
We already has discussed about the basic syntax of jQuery.
The JQuery library provides a wide range of built in animation which web developers use in their design and produce nice looking awesome layouts. There are some popular jQuery effects which we discuss in this post.
- Hide
- Show
- FadeIn
- FadeOut
- Slide-up
- Slide-down
- Animate
- Stop
Hide ():
This effect is used to hide some element. We just have to select that element using any selector and call this function.
Syntax:
$(CSS Selector).hide (hide speed, callback function);
Example:
|
1 2 3 4 5 6 7 8 9 |
<Button>Click me to hide</button> <script> $(document).ready (function () { $("button").click (function () { $("this").hide (); }); }); </script> |
Show ():
Same as hide, show is used to show a hidden element or also used to show the element that’s display property is set to none ( display :none; ).
Syntax:
$(CSS Selector).show (showing speed, callback function);
Example:
|
1 2 3 4 5 6 7 8 9 10 |
<button>Click me to show</button> <p style=”display: none;”>This line is shown</p> <script> $(document).ready (function () { $("button").click (function () { $("p").show (); }); }); </script> |
toggle ():
This function is used to convert the actual state to another state like hide to show and show to hide.
Syntax:
$(CSS Selector).toggle ( speed, callback function);
Example:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 |
<button>Click me to show</button> <p style=”display: none;”>This line is shown</p> <script> $(document).ready (function () { $("button").click (function () { $("p").toggle (); }); }); </script> |
fadeIn ():
Fade in is same like show() but they are used to show hidden elements. Taking two parameters and both are optional which are callback and speed it may be slow fast or in milliseconds.
Syntax:
$(CSS Selector).fadeIn (speed, callback function);
Example:
|
1 2 3 4 5 6 7 8 9 10 |
<button>Click me to fade in</button> <p style="display: none;">This line is shown</p> <script> $(document).ready (function () { $("button").click (function () { $("p").fadeIn (); }); }); </script> |
fadeOut ():
Fade in same like hide () but they are used to hide elements. It also takes two parameters and both are optional which are callback and speed it may be slow fast or in milliseconds.
Syntax:
$(CSS Selector).fadeOut (speed, callback function);
Example:
|
1 2 3 4 5 6 7 8 9 10 |
<button>Click me to Fade Out</button> <p>this line is shown</p> <script> $(document).ready (function () { $("button").click (function () { $("p").fadeOut (); }); }); </script> |
Fadetoggle ():
This function is used to convert the actual state to another like hide to show and show to hide. Taking two parameters and both are optional which are callback and speed it may be slow fast or in milliseconds.
Syntax:
$(CSS Selector).fadeToggle ( speed, callback function);
Example:
|
1 2 3 4 5 6 7 8 9 10 |
<button>Click me to change state</button> <p>This line is shown</p> <script> $(document).ready (function () { $("button").click (function () { $("p").fadeToggle (); }); }); </script> |
SlideDown ():
This function is used to show hidden element by sliding down. Taking two parameters and both are optional which are callback and speed it may be slow fast or in milliseconds.
Syntax:
$(CSS Selector).slideDown ( speed, callback function);
Example:
|
1 2 3 4 5 6 7 8 9 10 |
<button>Click me to Slide Down</button> <p style=”border:2px solid;height:500px;display:none;”>This line is shown</p> <script> $(document).ready (function () { $("button").click (function () { $("p"). slideDown (); }); }); </script> |
SlideUp ():
This function is used to hide element by sliding up. Taking two parameters and both are optional which are callback and speed it may be slow fast or in milliseconds.
Syntax:
$(CSS Selector).slideUp ( speed, callback function);
Example:
|
1 2 3 4 5 6 7 8 9 10 |
<button>Click me to Slide Up</button> <p style=”border:2px solid;height:500px;”>This line is shown</p> <script> $(document).ready (function () { $("button").click (function () { $("p"). slideUp (); }); }); </script> |
SlideToggle ():
This function is used to show hidden element by sliding down and hide showing element to sliding up. Taking two parameters and both are optional which are callback and speed it may be slow fast or in milliseconds.
Syntax:
$(CSS Selector).slideToggle ( speed, callback function);
Example:
|
1 2 3 4 5 6 7 8 9 |
<button>Click me to Slide Down</button> <p style=”border:12px solid;height:500px;”>This line is shown</p> <script> $(document).ready (function () { $("button").click (function () { $("p"). slideToggle (); }); }); </script> |
Animate ():
The animate function in jQuery is used to create animations.
Syntax:
$(css selector).animate ({ parameters },animate speed, callback function);
Example:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 |
#search{padding: 10px;} #search .box{float: left;} #search input{height: 50px;box-shadow: 2px 2px 10px blue;} #search input[type=image]{height: 42px;background-color: skyblue;border: 4px;border-style: solid;border-color: black;border-radius:10px;} #search input[type=text]{display:none;border: 4px;border-style: solid;border-color: black;width:250px;border-radius:10px;;} </style> <div class="main"> <div class="search_bar" id="search"> <div class="box"><input type="text" placeholder="Search..." ></div> <div class="btn"><input type="image" src="pic.png" alt="submit"></div> </div> </div> <script> $(document).ready(function(){ $("input[type=image]").click(function(){ $("input[type=text]").animate({width:'toggle',border:'toggle'},700); }); }); </script> |
Stop ():
This function is used to stop the current process.
Syntax:
$(CSS Selector).stop ();
Example:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 |
<button>Click me to Slide Down</button> <button class=”stop”>Stop Slide</button> <p style=”border:12px solid;height:500px;”>This line is shown</p> <script> $(document).ready (function () { $("button").click (function () { $("p"). slideToggle (); }); $(".stop").click (function (){ $("p").stop (); }); }); </script> |