jQuery with ASP.NET III - Animations

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

Background

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

• Enlarging text on mousehover
• Creating 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 assumptions that 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 enalrged 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 int 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 css class enlarge, and retrieve its font-size property, parseFloat to our variable origFontSize.
• $("#content").hover set 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 set our font size variable with new size, by multiplying original font size with our multiplier scale, 3 in this case.
• $(".enlarge").animate({ fontSize: newFontSize }, 300); here the actual method comes which do the animation on our label control. animate method takes the animation object with properties required to animate. In our case we only passed 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 passed the time span value in milliseconds. In our case it takes 300 milliseconds to changes its font-size with new value.
• $(".enlarge").animate({ fontSize: origFontSize }, 300); Inside the
  mouseout function, we reset our fontSize with original value contained in the variable origFontSize

Creating fade effect on mousehover

Place a fieldset with id = content and put an image control inside 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 set 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 with 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 slide the elements. Place a div with our any 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 code>slide, we defined as :

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

• Attach click event for button btnSubmit.
• e.preventDefault() stops the page from being postback, by preventing the default behavior.
• $(".slide").is(":hidden") first check, if our element with css class slide is already hidden, if so, then 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 timespane value slow.

Animating the panel

Drop a button control to let the user do 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. Placed 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 define our variable to maintain the status for our panel animation.
• Attach the click event for button btnSumbit.
• e.preventDefault() stops the page from being postback, by preventing the default behavior.
• regular == true first check, if we have not already applied our animation on the panel. then (".contentArea").animate() method is called with different values for different css properties we have to change or applied on our panel content, and second paramter (slow)for animate method is the timespan to 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 orinial values for different css properties to be set for the targeted panel.

Hide and Display panels

Lets hide and display different panels, a menu like panel headers displayed on the
web page and we explore the corresponding content panels when we clicked 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 first panel, which act as menu header, and set CssClass = content_body for second panel which displays the content for that menu item. We defined 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 hide all the content elements, if already explored some other menu item and showing the content, we first hide that contents.
• $(this).next(".content_body").slideToggle("slow") now grab the current clicked element by this and find the next content item attached for this menu item by next(".content_body"). Here we reached the content panel attached to the click menu item. Now we toggle the slide status by calling slideToggle() with 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 the power to chain your animation effects for any elements 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 button btnSumbit.
• e.preventDefault() stops the page from being postback, by preventing the default behavior.
• $('.contentArea') select our panel and call animate()
  methods repetitively in a chain model. Keep min minde that the animate() methods returns object element to which it is already called, so by repetitively calling this method with continous . notation we actually calling this method for the same object in reptition pattern, because the method returns the same object to which it is called with updated object status.
• animate({ left: "+=200"}, 2000)animates the panel by changing its position on the webpage, set its css left property to some new value, and provide 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 change 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) change 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 change the left css property, and add change the left position of the panel.

References

ASP.Net jQuery Cookbook by Sonal Aneel Allana

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 the web users. You must explore those methods and you will find that its now become very easy to develop interactive web pages with jQuery by spending very little effort.

You could download the working copy for these code samples from my CodeProject post
jQuery with ASP.NET III - Animations