jQuery effects and animations

As we all know jQuery is a java script library. It has many advantages. For example, write less and do more, cross browser support, we can do various java script effects and animations, AJAX enabled, HTML DOM manipulating is very easy, easy syntax which is easy to write code, it is free and open source etc. That is way jQuery is very popular java script library. Many are using this library in their projects for various types of work. There are also some plugin which is built on top of jQuery library. For example jQuery validation plugin, jQuery UI etc. Also jQuery team has introduced a version for mobile platform. I hope it will also become very popular like his desktop counterpart.

So actually in web application we need to do various types of effect and animation using client end scripting. Now it is very common to use jQuery for this kind of work. It uses java script under the hood. jQuery has some function for effects and animations. For example hide(), show(). For more details about these functions you can search the web or go to jQuery site.

Now today I have created a short demo ASP.NET application and do some effect and animation work with HTML documents. For that I have used jQuery.

Now let’s start from the beginning of my demo application. I have created a new ASP.NET Web Application in Visual Web Developer (VWD) 2010 Express Edition. Now by default VWD add jQuery library in the project template. You can find it in ‘Scripts’ folder in your solution. It is jQuery 1.4.1. Here you can find three files of jQuery. ‘jquery-1.4.1.js’ is for jQuery library. ’jquery-1.4.1.min.js’ is for minified library and ‘jquery-1.4.1-vsdoc.js’ is created by Microsoft which is used by VWD. Minified library is for production server. It is light and all the variables has single letter name and all comments and spaces are removed. So it is not suitable for human reading. For debugging and reading purpose normal jQuery library is suitable. Also the minified counterpart is also less in size that means less time it will take to download in the client computer. Now in Default.aspx I have written some html at the second content area.

<div id="divWraper">
    <div id="divButtons">
        <input type="button" id="btnAnimate" name="btnAnimate" value="Hide" />
        <input type="button" id="btnLightTheme" name="btnLightTheme" value="Light Theme" />
        <input type="button" id="btnDarkTheme" name="btnDarkTheme" value="Dark Theme" />
    </div>
    <div id="divSampleText">
        This is example text. This is example text. This is example text. This is example
        text. This is example text. This is example text. This is example text. This is
        example text. This is example text. This is example text.This is example text. This
        is example text. This is example text. This is example text. This is example text.
        This is example text. This is example text. This is example text. This is example
        text. This is example text.This is example text. This is example text. This is example
        text. This is example text. This is example text. This is example text. This is
        example text. This is example text. This is example text. This is example text.This
        is example text. This is example text. This is example text. This is example text.
        This is example text. This is example text. This is example text. This is example
        text. This is example text. This is example text.
    </div>
</div>

Now I have written some CSS at the first content area to give some style for the html.

#animateButton, #lightThemeButton, #darkThemeButton
{
    background-color: ButtonFace;
    color: ButtonText;
}
        
#divSampleText
{
    width: 97%;
    text-align: justify;
    padding: 10px;
}
        
.Light
{
    color: Black;
    background-color: Silver;
    border: thin solid black;
}
        
.Dark
{
    color: Silver;
    background-color: Black;
    border: thin solid yellow;
}

You can see here that there are two CSS classes, Light and Dark. This classes having some colour theme for light and dark respectively. The plan is that when user will click on the ‘light theme’ and ‘dark theme’ button then the respective colour theme will be applied to the underling demo text area.

Also there is a show/hide button. When user will click on that button then the demo text area will animate. The type of the animation in this case is, it will slide out and slide in. Also depending on the status of the demo text area the show/hide button face will change. So let’s take a look at the jQuery code.

<script src="Scripts/jquery-1.4.1.min.js" type="text/javascript"></script>
<script type="text/javascript">
    // My code goes here...
</script>
$(document).ready(function () {

    // It will set light theme at the start.
    $("#divSampleText").addClass("Light");

    // Dynamically change light and dark theme. It is necessary to remove 
    // the dark class before set to light and vice varsa.
    $("#btnLightTheme").click(function () {
        $("#divSampleText").removeClass("Dark");
        $("#divSampleText").addClass("Light");
    });
    $("#btnDarkTheme").click(function () {
        $("#divSampleText").removeClass("Light");
        $("#divSampleText").addClass("Dark");
    });

    // Toggle show and hide the demo text area and change the button face.
    // To change the button face I have used call back function.
    $("#btnAnimate").click(function () {
        $("#divSampleText").slideToggle(function () {
            if ($("#divSampleText").is(":hidden")) {
                $("#btnAnimate").val("Show");
            }
            else {
                $("#btnAnimate").val("Hide");
            }
        });
    });
});

First it will check the html document loading is complete or not. Then it will start his job. First it will set light theme to the demo text. It is for start-up theme. Then it will change theme depending on the user action. For that I have used jQuery addClass() and removeClass() functions. It will add and remove the CSS class. After that when user click the show/hide button then the animation take place and button face will change. To change the button face I have used call back function. That means I have passed a function definition to the slideToggle() function parameter. When the slideToggle() function will finished his animation then it will call the call back function and button face will change. Without using call back function I cannot do it. If I wrote it in the next line then it will execute even before the animation is going. But I need the button face change only after the completion of the animation. So call back function is the solution.

Now my full demo is ready. Running it and click on the buttons and check the results. Can you see how much it is easy using jQuery? I will encourage you to go to jQuery documentation for more information on the functions. Also there are many more to know about jQuery effects and animations.

Advertisements

2 Replies to “jQuery effects and animations”

    1. Sure. You can search the internet about jQuery effects and animation. Also many famous websites are using this open source library. Also you can check out my personal code sample repositary for jQuery code snipet and download it and see the effect. You can find my online public code sample repositary on this site soon. Please keep contact and be happy.

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s