Support us .Net Basics C# SQL ASP.NET Aarvi MVC Slides C# Programs Subscribe Download

jQuery class transition animation

Suggested Videos
Part 99 - jQuery sortable widget
Part 100 - jQuery sortable from database
Part 101 - jquery background color animate



In this video we will discuss jQuery UI support for animating class transitions.



jQuery UI adds support for animating colors and class transitions. We discussed animating colors in Part 101 of jQuery tutorial. In this video we will discuss animating class transitions.

With the basic jQuery functionality, the following methods will not animate style properties of a css class.
.addClass()
.removeClass()
.toggleClass()

jQuery UI supports animating class transitions. In the example below a reference to jQuery UI is included, hence the class transition animations work while adding and removing classes. If we remove the jQuery UI reference, class transition animations will not work.

jQuery class transition animation

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>
    <script src="jquery-1.11.2.js"></script>
    <script src="jquery-ui.js"></script>
    <script type="text/javascript">
        $(document).ready(function () {
            var applyClass = true;
            $('#btnAnimate').click(function () {
                if (applyClass) {
                    $('#myDiv').addClass('redDiv', 2000);
                }
                else {
                    $('#myDiv').removeClass('redDiv', 2000);
                }
                applyClass = !applyClass;
            });
        });
    </script>
    <style>
        .redDiv {
            background-color: red;
            color: white;
            font-size: 20px;
            border: 5px solid black;
            padding: 5px;
            width: 500px;
        }
    </style>
</head>
<body style="font-family: Arial">
    <form id="form1" runat="server">
        <div id="myDiv">
            At Pragim Technologies, training is delivered by real time software experts
            having more than 10 years of experience. Interview questions and real time
            scenarios discussion on topics covered for the day. Realtime projects
            discussion relating to the possible interview questions. Trainees can attend
            training and use lab untill you get a job. Resume preperation and mock up
            interviews. 100% placement assistance. 24 hours lab facility.
        </div>
        <br />
        <input type="button" id="btnAnimate" value="Animate" />
    </form>
</body>
</html>

toggleClass() example : Modify the code in jQuery ready function to use toggleClass() instead of addClass() and removeClass() methods.

$(document).ready(function () {
    $('#btnAnimate').click(function () {
        $('#myDiv').toggleClass('redDiv', 2000);
    });
});

The following are the common parameters of addClass(), removeClass() and toggleClass() methods.

Parameter Description
className The css class name that you want to add, remove or toggle
speed animation speed. The value can be a string ('slow', 'normal', or 'fast') or a number of milli-seconds. The default is normal i.e 400 milli-seconds. slow and fast are 600 and 200 milli-seconds respectively
easing The value is a string the specifies the name of the easing function. Easing functions specify the speed at which an animation progresses at different points within the animation
callback A function to call once the animation is complete

List of all easing functions
http://api.jqueryui.com/easings

jQuery tutorial for beginners

1 comment:

  1. Sir,
    Please present us a video series on TESTING and then DESIGN PATTERN.

    Thanks

    ReplyDelete

It would be great if you can help share these free resources