| toggleclass |
|
|
|
|
|
|
|
| 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) { |
easing function like swing |
|
$('#myDiv').addClass('redDiv', 2000); |
add css |
| alert animation complete |
|
| } |
|
| else { |
|
|
$('#myDiv').removeClass('redDiv', 2000); |
|
| } |
remove css |
| 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 |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
| .addClass() |
| .removeClass() |
| .toggleClass() |
| addclass |
| removeclass |
| toggleclass |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
No comments:
Post a Comment