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