jQuery Effects

jQuery is tailor-made to respond to events in an HTML page.

jQuery hide() and show()

With jQuery, you can hide and show HTML elements with the hide() and show() methods:

Example


<script src="./jquery-3.2.1.js"> </script>
<script>
$(document).ready(function(){
$("#hide").click(function(){
$("p").hide();
});
$("#show").click(function(){
$("p").show();
});
});
</script>
<p>If you click on the "Hide" button, I will disappear.</p>
<button id="hide">Hide</button>
<button id="show">Show</button>

Run Example>>


Syntax:

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

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

The optional speed parameter specifies the speed of the hiding/showing, and can take the following values: "slow", "fast", or milliseconds.

The optional callback parameter is a function to be executed after the hide() or show() method completes (you will learn more about callback functions in a later chapter).

The following example demonstrates the speed parameter with hide():

Example


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

Run Example>>


jQuery Fading Methods

With jQuery you can fade an element in and out of visibility.

jQuery has the following fade methods:

  • fadeIn()
  • fadeOut()

    • fadeIn()

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

    The optional speed parameter specifies the duration of the effect. It can take the following values: "slow", "fast", or milliseconds.

    The optional callback parameter is a function to be executed after the fading completes.

    The following example demonstrates the fadeIn() method with different parameters:

    Example


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

    Run Example>>


    fadeOut()

    The jQuery fadeOut() method is used to fade out a visible element.

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

    The optional speed parameter specifies the duration of the effect. It can take the following values: "slow", "fast", or milliseconds.

    The optional callback parameter is a function to be executed after the fading completes.

    The following example demonstrates the fadeOut() method with different parameters:

    Example

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

    Run Example>>



    jQuery Sliding Methods

    With jQuery you can create a sliding effect on elements.

    jQuery has the following slide methods:

  • slideDown()
  • slideUp()

    • slideDown()

    The jQuery slideDown() method is used to slide down an element.

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

    The optional speed parameter specifies the duration of the effect. It can take the following values: "slow", "fast", or milliseconds.

    The optional callback parameter is a function to be executed after the fading completes.

    The following example demonstrates the slideDown() method with different parameters:

    Example

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

    Run Example>>


    slideUp()

    The jQuery slideUp() method is used to slide down an element.

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

    The optional speed parameter specifies the duration of the effect. It can take the following values: "slow", "fast", or milliseconds.

    The optional callback parameter is a function to be executed after the fading completes.

    The following example demonstrates the slideUp() method with different parameters:

    Example

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

    Run Example>>


    jQuery Animations

    The jQuery animate() method is used to create custom animations.

    Syntax:
    $(selector).animate({params},speed,callback);;

    The required params parameter defines the CSS properties to be animated.

    The optional speed parameter specifies the duration of the effect. It can take the following values: "slow", "fast", or milliseconds.

    The optional callback parameter is a function to be executed after the animation completes. The following example demonstrates a simple use of the animate() method; it moves a <div> element to the right, until it has reached a left property of 250px:

    Example

    $("button").click(function(){
        $("div").animate({left: '150px'});
    }); 

    Run Example>>


    Multiple Effects

    Example

    <style type="text/css">
    #para
    {
    height:80px;
    width:100px;
    background-color:red;
    color:white;
    position:absolute;
    left:0px;
    top::0px;
    }
    </style>
    <script src="././jquery-3.2.1.js"> </script>
    <script>
    $(document).ready(function()
    {
    $("#para").slideUp(2000);
    $("#para").slideDown(2000);
    $("#para").fadeOut(3000);
    $("#para").fadeIn(1000);
    $("#para").hide(5000);
    $("#para").show(2000);
    $("#para").animate({'left':'200px'},4000);
    $("#para").animate({'top':'50px'},4000);
    $("#para").animate({'left':'0px'},4000);
    $("#para").animate({'top':'0px'},4000);
    $("#para").animate({'left':'60px','top':'30px'},5000);
    $("#para").animate({'top':'0px'},4000);
    $("#para").animate({'left':'150px'},4000);
    $("#para").animate({'top':'50px'},4000);
    $("#para").animate({'left':'60px'},4000);
    $("#para").animate({'top':'30px'},4000);
    $("#para").animate({'opacity':'0.2'},3000);
    $("#para").animate({'opacity':'1'},2000);
    });
    </script >
    <div id="para" width=100% height="500" style="background-color:#9CF">
    <object type="text/html" width=100% height="250" data="data.htm">
    </object>

    Run Example>>