filmov
tv
jQuery class transition animation
Показать описание
Link for all dot net and sql server video tutorial playlists
Link for slides, code samples and text version of the video
Healthy diet is very important both for the body and mind. If you like Aarvi Kitchen recipes, please support by sharing, subscribing and liking our YouTube channel. Hope you can help.
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>
<head runat="server">
<title></title>
<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 a addClass(), removeClass() and toggleClass() methods.
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
Link for slides, code samples and text version of the video
Healthy diet is very important both for the body and mind. If you like Aarvi Kitchen recipes, please support by sharing, subscribing and liking our YouTube channel. Hope you can help.
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>
<head runat="server">
<title></title>
<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 a addClass(), removeClass() and toggleClass() methods.
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
0:08:37
jQuery class transition animation
0:08:21
Real use of jQuery - Class Transition Animation (Part-21)
0:01:19
How to Animate Transitions Between CSS Classes Using jQuery
0:13:47
CSS TRANSFORMS TRANSITIONS AND ANIMATIONS PART 4 ADDCLASS WITH JQUERY
0:02:51
JQuery - Animation
1:41:36
w05d04 - CSS Transitions + Animations & jQuery Animations
0:06:56
Animating The Nav Using jQuery and CSS Transitions - Part 1
0:12:05
Jquery Animations | Jquery Chaining Methods | Jquery Hide | Fade | Slide | Animate | Callback Method
0:10:33
Animating The Nav Using jQuery and CSS Transitions - Part 3
0:07:54
#42 JQuery Animate Effect
0:01:23
JQuery animation : 1-Add Remove class
0:11:20
22 jQuery Element Manipulation: Modify HTML, CSS, Classes, and Attributes | JavaScript Tutorial
0:14:26
jQuery Live - 4 | jQuery Effects Tutorial | Effects in jQuery | jQuery Training | Edureka
0:09:47
Coding For The Web | jQuery & CSS Rotation
0:01:26
Awesome Transition Effect using HTML CSS and Jquery | Web Design Inspirations
0:15:09
How to Use Animsition jQuery Plugin for Website Transition
0:01:30
How to Create a Stunning Text Transition Effect Using jQuery and CSS
0:10:45
Smooth page transition using jQuery
0:39:15
COMP2105 Module 8 - jQuery Animation
0:15:36
JQuery UI- Add and remove class to create a looping color animation, Part 1 of 2
0:01:44
Achieve a Smooth Transition Using jQuery's switchClass Method on Hover
0:02:10
Transition Effect Part-1 Using Html, Css and Jquery
0:01:30
How to Trigger CSS Animation on Scroll with jQuery?
0:57:09
Introduction to jQuery Effects & Animations (Chapter 9)
Комментарии