Jquery Examples

1. $(document).ready(function(){})


$(document).ready(function(){
    $("p").click(function(){
        $(this).hide();
    });
});



2. jQuery Selectors

The element Selector

$(document).ready(function(){
    $("button").click(function(){
        $("p").hide();
    });
});

The #id Selector

$(document).ready(function(){
    $("button").click(function(){
        $("#test").hide();
    });
});

The .class Selector

$(document).ready(function(){
    $("button").click(function(){
        $(".test").hide();
    });
});

3. jQuery Effects Hide/Show

jQuery hide() and show() and jQuery toggle()

$("#hide").click(function(){
    $("p").hide();
});

$("#show").click(function(){
    $("p").show();
});

$("button").click(function(){
    $("p").toggle();
});

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

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

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

values: "slow", "fast", or milliseconds.

4. jQuery Fading Methods

jQuery has the following fade methods:

• fadeIn()
• fadeOut()
• fadeToggle()
• fadeTo()

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

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

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

$(selector).fadeTo(speed,opacity,callback);

$("button").click(function(){
    $("#div1").fadeIn();
    $("#div2").fadeIn("slow");
    $("#div3").fadeIn(3000);
});

$("button").click(function(){
    $("#div1").fadeOut();
    $("#div2").fadeOut("slow");
    $("#div3").fadeOut(3000);
});

$("button").click(function(){
    $("#div1").fadeToggle();
    $("#div2").fadeToggle("slow");
    $("#div3").fadeToggle(3000);
});

$("button").click(function(){
    $("#div1").fadeTo("slow", 0.15);
    $("#div2").fadeTo("slow", 0.4);
    $("#div3").fadeTo("slow", 0.7);
});


5.jQuery Sliding Methods

With jQuery you can create a sliding effect on elements.

jQuery has the following slide methods:

• slideDown()
• slideUp()
• slideToggle()

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

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

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

$("#flip").click(function(){
    $("#panel").slideDown();
});

$("#flip").click(function(){
    $("#panel").slideUp();
});

$("#flip").click(function(){
    $("#panel").slideToggle();
});


6.jQuery stop() Method

The jQuery stop() method is used to stop an animation or effect before it is finished.

The stop() method works for all jQuery effect functions, including sliding, fading and custom animations.

$(selector).stop(stopAll,goToEnd);

$("#stop").click(function(){
    $("#panel").stop();
});