jQuery Tutorial: Make Web Pages More Interactive by Animation

Animation in web pages improves the comprehensiveness of the web pages & information displayed.

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

Hey There! You have made it this far.

Would you like to subscribe via email?