JQuery Effects

By,
Santosh

In 2006 John Resig come up with a nice tag line − Write less, do more invented jQuery is a fast and concise JavaScript Library.
jQuery simplify HTML document traversing, Ajax interactions , animating, and event handling for web development.

Here is the list of some main core functionality supported by jQuery. jQuery is a JavaScript toolkit simplify various tasks by writing less code.
•DOM manipulation       − The jQuery made it simple to select DOM elements, traverse them and
                                           do changes in their content by using cross-browser.
•Latest Technology         − Also jQuery supports basic XPath syntax and CSS3 selectors.
•Animations                    − The jQuery provides a built-in animation effects.
•Cross Browser Support − The jQuery works well in Safari 3.0+, FF 2.0+, Chrome, IE 6.0+,  and
                                            Opera 9.0 so it has cross-browser support.
•AJAX Support               − The jQuery helps you in many ways to develop a feature-rich site and
                                            responsive by using AJAX technology.
•Lightweight                   − 19KB in size so that it is very lightweight library.
•Event handling               − The jQuery offers a variety of events, like as a user clicking on a link,  
                                            press a keyboard button, scroll etc.

                                         

Effects in jquery :-
1. jQuery hide() and show() :-
Using jQuery, we can do hide and show HTML elements by using predefined methods that is hide() and show().
Syntax :-
$("#hide-element").click(function()
{
    $("#div").hide();   // to hide the #div element on screen hide() used here
 });
$("#show-element ").click(function()
{ 
    $("#div").show();  // to show the hidden #div element on screen show() used here.
});

2.jQuery toggle() :-
Using toggle method we can done 2 different functionality on single button With jQuery, we can toggle within the show()  and hide() methods with the toggle() method.
Hidden elements are shown and shown elements are hidden.

Syntax :-
$("button").click(function()
{
    $("#div").toggle();  
});

3.Fading :-
Using fading we can animate the images, content of block, boxes, buttons etc. there are four fading methods that are as below shown.
fadeIn() :-
Syntax :-
$(document).ready(function()
{
    $("button").click(function()
    {
        $("#p1").fadeIn(5000);       
        $("#p2").fadeIn();
                $("#p3").fadeIn("slow");
           });
});

fadeOut() :-
Syntax :-
$(document).ready(function()
{
    $("button").click(function()
    {
        $("#p1").fadeOut(5000);
        $("#p2").fadeOut("slow");
                $("#p3").fadeOut();
       });
});

fadeToggle() :-
Syntax :-
$(document).ready(function()
{
    $("button").click(function()
    {
        $("#p1").fadeToggle(5000);
        $("#p2").fadeToggle("slow");
        $("#p3").fadeToggle();
        });
});

fadeTo() :-
Syntax :-
$(document).ready(function()
{
    $("button").click(function()
    {
        $("#p1").fadeTo("slow", 0.2);
        $("#p2").fadeTo("slow", 0.7);
        $("#p3").fadeTo("slow", 0.12);
    });
});

4.Sliding :-
Using jQuery we can create a sliding effect on html elements.
Following are the slide methods:
•slideDown() :-
The jQuery slideDown() method is used to slide down an html element.
Syntax :-
$("#flip-slide").click(function()
{
    $("#panel-body"). slideDown ();
});

•slideUp() :-
The jQuery slideUp() method is used to slide up an html element.
Syntax :-
$("#flip- slide ").click(function()
{
    $("# panel-body ").slideUp();
});

•slideToggle() :-
The jQuery slideToggle() method toggles between the slideUp() and slideDown()  methods.
If html elements has been slide down, slideToggle() will slide them up.
If html elements has been slide up, slideToggle() will slide them down.
Syntax :-
$("#flip-slide").click(function()
{
    $("#panel-body").slideToggle();
});