5 Useful Basic jQuery Syntax
1) Hide/Show
This is used to hide or show html elements with no effects. Use this if you want to quickly hide or show some html elements.
- Syntax: hide(), show()
EXAMPLE :
$(document).ready(function(){
$(".btn1").click(function(){
$("p").hide();
});
$(".btn2").click(function(){
$("p").show();
});
});
LIVE DEMO:
http://www.w3schools.com/jquery/tryit.asp?filename=tryjquery_eff_show_hide
2) Fade in/Fade out
This involves of hiding and showing html elements using nice fading effects. It is well used when you want to show or hide a div and its content in a nice way.
- Syntax: fadeIn(), fadeout()
EXAMPLE:
$(document).ready(function(){
$(".btn1").click(function(){
$("p").fadeOut()
});
$(".btn2").click(function(){
$("p").fadeIn();
});
});
LIVE DEMO:
http://www.w3schools.com/jquery/tryit.asp?filename=tryjquery_eff_fadeout_fadein
3) Stop
If you want to stop currently running animations just use this.
- Syntax: stop()
EXAMPLE:
$(document).ready(function(){
$("#start").click(function(){
$("div").animate({height:300},3000);
});
$("#stop").click(function(){
$("div").stop();
});
});
LIVE DEMO:
http://www.w3schools.com/jquery/tryit.asp?filename=tryjquery_eff_stop
4) Animate
A nice syntax that makes changes to an element from one state to another with CSS styles. It just gradually changes the CSS property value, which will result to animation effects.
- Syntax: animate()
EXAMPLE:
$(document).ready(function()
{
$("#btn1").click(function(){
$("#box").animate({height:"300px"});
});
$("#btn2").click(function(){
$("#box").animate({height:"100px"});
});
});
LIVE DEMO:
http://www.w3schools.com/jquery/tryit.asp?filename=tryjquery_eff_animate
5) Slide Toggle
This syntax is greatly used in various websites that uses jQuery. Ideally it is just to hide and show an html element, but in a very nice sliding effect just like the left side bar menu in administrator area of a typical WordPress website.
- Syntax: slideToggle()
EXAMPLE:
$(document).ready(function(){
$("button").click(function(){
$("p").slideToggle();
});
});
LIVE DEMO:
http://www.w3schools.com/jquery/tryit.asp?filename=tryjquery_eff_slidetoggle