jQuery Tutorial: Make Web Pages More Interactive by Animation
Make Web Pages Animated with jQuery Animations
Make Web Pages Animated with jQuery Animations
Hello Friends! In the previous post about animation we had a discussion about animations through CSS3. But what if the browser does not support CSS3 or its animation or the user only likes Internet Explorer 8 and below. Here’s the deal; jQuery.
In this post we will talk about the deal we made for animation; yes jQuery.
The Web Development Community is completely aware of jQuery. But for Beginners and the people who aren’t aware of it here is the short description.
jQuery is a JavaScript library which provides a complete range of functions and features to work with.
One of the feature that I’m gonna tell you about is animation.
Take any html element; like for example I am taking span for this purpose with id target. The id target will help to bind the jQuery animation to the element.
|
1 |
<span id='target' >This is the target SPAN</span> |
Apply some style to make it look good.
|
1 2 3 4 5 6 7 |
#target { display : inline-block; width : 100px ; height : 100px ; background : #ccc; border : 1px solid #aaa ; } |
Now link the jQuery library to your html page. Do it by this code to attach it from CDN.
|
1 2 3 4 5 6 7 8 9 10 11 |
<script type='text/javascript' src='http://code.jquery.com/jquery.min.js'></script> <script type='text/javascript' > $(document).ready(function(){ $('#target').click(function(){ console.log(this); $(this).animate({height: "200px", width : "200px"}, "slow", function(){ $(this).animate({height: "100px", width: "100px"}, "slow"); }); }); }); </script> |
This way you can change the following CSS properties in the jQuery animation.
- backgroundPosition
- borderWidth
- borderBottomWidth
- borderLeftWidth
- borderRightWidth
- borderTopWidth
- borderSpacing
- margin
- marginBottom
- marginLeft
- marginRight
- marginTop
- outlineWidth
- padding
- paddingBottom
- paddingLeft
- paddingRight
- paddingTop
- height
- width
- maxHeight
- maxWidth
- minHeight
- minWidth
- font
- fontSize
- bottom
- left
- right
- top
- letterSpacing
- wordSpacing
- lineHeight
- textIndent
So go on and play with this! And yes share your views by commenting below!