Animation effect using jQuery

Query is not only useful for the basic work that we do using JavaScript but also for giving outstanding animation effect. In this tutorials, I will try to show how to use jQuery functions to animate the html elements.

How to show/hide an element

To simply show and hide element, we can use show() and hide() method of the jQuery. There are several parameter that can be passed in these two methods in order to give special effect. These parameters can are:

• slow
• normal
• fast
• Any numeric digit (number of milliseconds to run the animation)

If we do not pass any parameter to these functions, it act instantly.
In the 2nd button click event, you can see that I have not passsed any parameter to the hide() function, so it will not animatte while hiding the element.
In the click event of last two buttons, I have passed 3000 as parameter so while showing and hidding the animation duration will be 3000 milliseconds.If we want to toggle display an html element, we can use toggle() method. We can also pass the same parameter that is applicable to show() and hide() methods.

// jQuery code
<script>
    $(document).ready(function() {

        $("#jbtnShow").click(function() {
            $("#jShow").show("slow");
        })
        $("#jbtnHide").click(function() {
            $("#jShow").hide();
        })

        //---------------
        $("#jbtnShowFast").click(function() {
            $("#jShow").show("fast");
        })
        $("#jbtnHideNormal").click(function() {
            $("#jShow").hide("normal");
        })
        //----------------
        $("#jbtnShowCount").click(function() {
            $("#jShow").show(3000);
        })
        $("#jbtnHideCount").click(function() {
            $("#jShow").hide(3000);
        })

        // -----------------------
        $("#jbtnToggle").click(function() {
            $("#jShow").toggle("slow");
        })     
    })
</script>

// html code
<div id="jShow" style="display:none;">This is the hiddent text</div>
<input type="button" value="Show Text" id="jbtnShow" />
<input type="button" value="Hide Text" id="jbtnHide" /> |
<input type="button" value="Show Fast" id="jbtnShowFast" />
<input type="button" value="Hide Normal" id="jbtnHideNormal" /> |
<input type="button" value="Show by animating 3000 milliseconds" id="jbtnShowCount" />
<input type="button" value="Hide by animating 3000 milliseconds" id="jbtnHideCount" /> |
<input type="button" value="Click to Toggle display" id="jbtnToggle" />

| | |

How to slide display an element

If we want to give a slide effect while showing or hiding the element, we can use slideDown() and slideUp() method respectively. We have freedom to pass the same parameter that is applicable to the show() and hide() method described above, even we can specify the animation duration in milliseconds as we have done above.

If we want to toggle display with slide effect, we can use sliderToggle() method.

// jQuery code
<script>
    $(document).ready(function() {
        $("#jbtnSlideDown").click(function() {
            $("#jdivWelcome").slideDown();
        })
        $("#jbtnSlideUp").click(function() {
            $("#jdivWelcome").slideUp("slow");
        })
        $("#jbtnSlideToggle").click(function() {
            $("#jdivWelcome").slideToggle();
        })            
    })
</script>  

// html code
<div id="jdivWelcome" style="display:none;">
    Welcome to DotNetFunda.com. <br /><br />
    DotNetFunda.Com is a popular Microsoft® technologies related knowledge based website offering articles, tutorials, tips, forums, interview questions, sample projects with source code and other features including online resources, technical jokes, and IT activities around the world. <br /><br />
    Please enjoy your visit and learn and/or share knowledge. Thanks.
</div>
<input type="button" value="Slide Down" id="jbtnSlideDown"/>
<input type="button" value="Slide Up" id="jbtnSlideUp"/>
<input type="button" value="Slide Toggle" id="jbtnSlideToggle"/>

How to give fade in/out effect

If we want to give fade effect to the html element, we can use fadeIn() and fadeOut() method to show and hide the element respectively with fading effect. We can also use slow, normal, fast and number of milliseconds as parameter to these methods as we had used with show() and hide() method above.

If we do not want to fade an element completely, we can use fadeTo(effect, amount) method and pass effect(slow, normal, fast) and amout (numeric value, where 0 is transparent and 1 is opaque) as parameter.

<script>
    $(document).ready(function() {
        $("#btnFadeIn").click(function() {
            $("#jDivFade").fadeIn();
        })

        $("#btnFadeOut").click(function() {
            $("#jDivFade").fadeOut();
        })

        $("#btnFadeLimited").click(function() {
            $("#jDivFade").fadeTo("slow", 0.40);
        })        
    })
</script>

<div id="jDivFade" style="width:300px;height:100px;
    display:none;text-align:center;">You are intelligent !!!</div>
<input type="button" id="btnFadeIn" value="Fade In" />
<input type="button" id="btnFadeOut" value="Fade Out" />
<input type="button" id="btnFadeLimited" value="Fade to Limited amount" />