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.
toggleClass() example : Modify the code in jQuery ready function to use toggleClass() instead of addClass() and removeClass() methods.
The following are the common parameters of addClass(), removeClass() and toggleClass() methods.
List of all easing functions
http://api.jqueryui.com/easings
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.
<!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
Sir,
ReplyDeletePlease present us a video series on TESTING and then DESIGN PATTERN.
Thanks