jQuery with ASP.NET III - Animations

• Download source - 999 KB

Introduction

Since jQuery has emerged, interactive and more responsive web applications have become easier to develop in today's world. It provides many powerful features that you could get to use very efficiently with less coding, which otherwise requires more development efforts and lines of code to accomplish even a single effect. In this article we will focus on the animation features provided by jQuery and use the animation effects in our ASP.NET website.

Background

In the last post jQuery in ASP.NET II - GridView, we explored some responsive behavior with the GridView control and validated our multi-line textbox to a specified limit of characters. Here we set our focus on the different animation methods provided:

• Enlarge text on mousehover
• Create fade effect on mousehover
• Sliding elements
• Animating the panel
• Hide and display panels
• Chain of animations

Note that we only discuss code segments here for jQuery, with the assumption that the corresponding ASP.NET controls are already placed on the webpage. You will get cleared while we proceed further. We will only discuss the code placed inside the script segment required for jQuery, like:

<script type="text/javascript">
     $(document).ready(function () {
         
         // our jQuery code will goes here...

     });
</script>

Enlarging text on mousehover

We place a label with some text displayed in it, and on mousehover we will enalrge the text inside the label by changing its font size.

var origFontSize = parseFloat($(".enlarge").css('font-size'));
$("#content").hover(
    function () {
        $(".enlarge").css("cursor", "pointer");
        var newFontSize = origFontSize * 3;
        $(".enlarge").animate({ fontSize: newFontSize }, 300);
    },
    function () {
        $(".enlarge").animate({ fontSize: origFontSize }, 300);
    }
);

Assumption: You have placed a fieldset with ID = content and dropped a Label with CssClass = enlarge, and put come text content in it. We have defined the enlarge class as:

.enlarge
{
    font-size: 12px;
    font-family: Arial,sans-serif;
}

• parseFloat($(".enlarge").css('font-size')) selects our label which has the CSS class enlarge, and retrieve its font-size property parseFloat to our variable origFontSize.
• $("#content").hover sets the hover event for our fieldset with id = content.
• Within the hover event, inside the mouseover function, we set the cursor for our label control to pointer.
• newFontSize sets our font size variable with a new size, by multiplying the original font size with our multiplier scale, 3 in this case.
• $(".enlarge").animate({ fontSize: newFontSize }, 300); - here the actual method comes which does the animation on our label control. The animate method takes the animation object with properties required to animate. In our case we only pass the property fontSize with our new size value newFontSize. This directs the animate method to change the properties passed as parameters with new values. And the second parameter for animate method, we pass the time span value in milliseconds. In our case it takes 300 milliseconds to changes its font-size with a new value.
• $(".enlarge").animate({ fontSize: origFontSize }, 300); Inside the mouseout function, we reset our fontSize with the original value contained in the variable origFontSize.

Creating fade effect on mousehover

Place a fieldset with id = content and put an image control inside the fieldset container.

$("#content").hover(
    function () {
        $("#<%=Image1.ClientID%>").css("cursor", "pointer");
        $("#<%=Image1.ClientID%>").fadeOut(1000);
    },
    function () {
        $("#<%=Image1.ClientID%>").fadeIn(1000);
    }
);

Assumption: You have placed a fieldset with id = content, and have an image control inside the fieldset container with ID = Image1. Set its src property to an image's path, here we create an images folder at the website's root and put our image.jpg in this folder. Also set CssClass for our image control to imagecontent, which we defined as:

.imagecontent
{
    width: 350px;
    height: 250px;
}

• $("#content").hover sets the hover event for our fieldset with id = content.
• Within the hover event, inside the mouseover function, we set the cursor for our image control to pointer.
• fadeOut is the actual method which creates the animation effect of fadeout. It takes the parameter to set the time span consumed to create the desired effect.
• fadeIn: Inside the mouseout function, we reset our image control with fadeIn with the required time span parameter.

Sliding elements

Drop a button control to provide the user a way to click and get to slide the elements. Place a div with our HTML content.

$("#<%= btnSubmit.ClientID%>").click(function (e) {
    e.preventDefault();
    if ($(".slide").is(":hidden")) {
        $(".slide").slideDown("slow");
    }
    else {
        $(".slide").slideUp("slow");
    }
});

Assumption: You have placed a Button control on the form with ID = btnSubmit. And have a div with CSS class slide, we defined as:

.slide
{
    font-size: 12px;
    font-family: Arial,sans-serif;
    display: none;
    height: 100px;
    background-color: #148A21;
    color:#000000;
}

• Attach the click event for the button btnSubmit.
• e.preventDefault() stops the page from being postback, by preventing the default behavior.
• $(".slide").is(":hidden") first checks if our element with CSS class slide is already hidden, if so slideDown("slow") our element. We have passed the constant timespan slow defined with jQuery, you could also change to any desired timespan value.
• If our element is not already hidden, then we will slideUp our element with the constant timespan value slow.

Animating the panel

Drop a button control to let the user animate the panel accordingly. Place a panel with our HTML content.

var regular = true;
$("#<%=btnSubmit.ClientID%>").click(function (e) {
    e.preventDefault();

    if (regular == true) {
        $(".contentArea").animate({
            opacity: 0.5,
            width: "500px",
            height: "280px",
            fontSize: "36px",
            borderWidth: "15px"
        }, "slow");
    }
    else {
        $(".contentArea").animate({
            opacity: 1.0,
            width: "300px",
            height: "100px",
            fontSize: "12px",
            borderWidth: "5px"
        }, "slow");
    }

    regular = !regular;
});

Assumption: You have dropped a button control on the form with ID = btnSubmit. Place a panel with CssClass = contentArea, we have defined as:

.contentArea
{
    font-size: 12px;
    font-family: Arial,sans-serif;
    width: 300px;
    height: 100px;
    background-color: #9999FF;
    border: solid;
}

• var regular = true defines our variable to maintain the status for our panel animation.
• Attach the click event for the button btnSumbit.
• e.preventDefault() stops the page from being postback, by preventing the default behavior.
• regular == true first checks if we have not already applied our animation on the panel. Then the (".contentArea").animate() method is called with different values for different CSS properties we have to change or are applied on our panel content, and the second parameter (slow) for the animate method is the timespan to be consumed in the animation effect.
• Else if have already applied the animation effects, now we are reverting back to our original CSS properties for the panel. We have set our original values for different CSS properties to be set for the targeted panel.

Hide and display panels

Let us hide and display different panels, a menu like panel header displayed on the web page and we explore the corresponding content panels when we click on any header panel.

$(".content_head").click(function () {
$(".content_body").hide(100);
$(this).next(".content_body").slideToggle("slow");
});

Assumption: You have placed a series of pairs of panels. Set CssClass = content_head for the first panel, which acts as a menu header, and set CssClass = content_body for the second panel which displays the content for that menu item. We define these CSS classes as:

.content_head
{
    width: 150px;
    height: 30px;
    background-color: #CCCCCC;
    cursor: pointer;
}
.content_body
{
    display: none;
    width: 150px;
    height: 50px;
    background-color: #9999FF;
}

• Attach the click event for the panels with CSS class content_head.
• $(".content_body").hide(100) first hides all the content elements, if already explored some other menu item and showing the content, we first hide that content.
• $(this).next(".content_body").slideToggle("slow") now grabs the currently clicked element by this and finds the next content item attached for this menu item using next(".content_body"). Here we reach the content panel attached to the click menu item. Now we toggle the slide status by calling slideToggle() with the constant timepspan slow.

Chain of animations

Now we place a panel box on the web page and animate it. We are not restricted to animate our elements only once but jQuery provides the power to chain your animation effects for any element you want.

$("#<%=btnSubmit.ClientID%>").click(function (e) {
    e.preventDefault();
    $('.contentArea').animate({ left: "+=200"}, 2000)
            .animate({ top: "+=100"}, 700)
            .animate({ left: "-=400"}, 1200)
            .animate({ top: "-=100"}, 700)
            .animate({ left: "+=200"}, 2000);
    });

Assumption: You have dropped a button control with ID = btnSubmit and let the user to control the animation effect by this button. Place a panel with CssClass = contentArea, we have defined the CSS class as:

.contentArea
{
    width: 50px;
    height: 50px;
    background-color: #71B3A2;
    border: solid;
    position: relative;
}

• Attach the click event for the button btnSumbit.
• e.preventDefault() stops the page from being postback, by preventing the default behavior.
• $('.contentArea') selects our panel and calls animate() methods repetitively in a chain model. Keep in mind that the animate() method returns an object element to which it is already called, so by repetitively calling this method with continuous . notation we are actually calling this method for the same object in a repetitive pattern, because the method returns the same object to which it is called with an updated object status.
• animate({ left: "+=200"}, 2000)animates the panel by changing its position on the webpage, sets its CSS left property to some new value, and provides the timespan 200 in milliseconds to complete the animation in this span.
• animate({ top: "+=100"}, 700) changes the top position of the panel by adding some new value to its CSS property top.
• animate({ left: "-=400"}, 1200) again changes the left CSS property, but this time passes a negative value, so this value is now subtracted form the current left position of the panel on the webpage.
• animate({ top: "-=100"}, 700) changes the top CSS property, but this time passes a negative value, so this value is now subtracted form the current top position of the panel.
• .animate({ left: "+=200"}, 2000); again changes the left CSS property, and changes the left position of the panel.

References

ASP.NET jQuery Cookbook by Sonal Aneel Allana

Points of interest 

We have explored some jQuery functions for achieving animation effects. jQuery offers many useful utilities to design animation, thus empowering developers to build rich animated pages for a better interactive experience for web users. You must explore those methods and you will find that it has now become very easy to develop interactive web pages with jQuery by spending very little effort.