jQuery Tutorial: Make Web Pages More Interactive by Animation

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 with 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 make use of jQuery animation to build highly interactive and amazing websites! And yes share your views by commenting below!

Demo  Download