jQuery Tutorial: Make Web Pages More Interactive by Animation

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.

<span id='target' >This is the target SPAN</span>

Apply some style to make it look good.

#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.

<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!

Demo  Download