Beginners Guide to Working with jQuery Animation

Posted in JS & AJAX, Photo Effects, Quick Tips, Tutorials8 months ago • Written by 42 Comments

In this tutorial, we are going explore the basics of jQuery animations for you to get prepared for advanced designs. Animations is the core functionality behind the interactive elements in web design.

The design of a website plays a major role in attracting visitors on a consistent basis. Interactive designs get more attention compared to the plain old static designs.

Technology is improving at a rapid pace to cater the advanced modern web designs. As a result, CSS3 offers the animations without the help of JavaScript. Even though CSS3 and HTML5 are improving in leaps and bounds, jQuery seems to be the popular choice for creating interactive designs.

Let’s get started!

Practical Usage of jQuery Animations

jQuery has been used widely for designing interactive elements such as sliders, menus, scrollers and so on. Before we start the animation aspects, I suggest you to have a look at the following practical implementations, which illustrates the power of jQuery animations.

As a beginner, you can’t  just jump into the types of designs illustrated in the preceding section. So here we are going to cover the basics of jQuery animations from the beginner’s perspective.

Introduction to Basic Animations with jQuery

Most designers have the knowledge of working with basic jQuery or JavaScript codes. Changing the visibility of an element is a common task that is included in almost every website design. We can just hide/show the element using CSS display or visibility attributes. jQuery simplifies the process by introducing two functions called hide and show. Consider the following code for showing and hiding an HTML element.


$("#panel").show();

$("#panel").hide();

With the preceding code, the element appears and disappears in a very limited time range. Use the following jsFiddle link to see a demo of the preceding code in action.

http://jsfiddle.net/nimeshrmr/bMmFS/

Ideally, we should smoothen the process of hiding and showing elements using animations to provide better user experience. jQuery provides two built-in techniques for showing and hiding elements with simple animation effect.

  • Fading – Integrates a fading motion into HTML elements by changing the element’s opacity.
  • Sliding – Integrates a sliding motion into HTML elements by changing the element’s height.

Let’s see how to use the above techniques to show and hide the elements with an animated effect.

jQuery encapsulates the complexity of animations by providing built-in methods to cater various tasks in web design.

Fading

Fading is mainly provided by the functions called fadeIn and fadeOut. Opacity of the element is increased by the fadeIn function and decreased by the fadeOut function. We can also pass the time interval for fading as shown in the following code.


$("#panel").fadeIn("slow");

$("#panel").fadeOut("fast");

We have the option of choosing slow or fast as the predefined values for the time interval . Also,we can pass the number in milliseconds to define the duration of animation. Here is the jsFiddle demo for working with fadeIn and fadeOut functions.

http://jsfiddle.net/nimeshrmr/zcRzL/

Sliding

Sliding functions change the height of the element instead of opacity for animating elements. Functions and syntaxes work exactly similar to fading, where slideUp is used for hiding and slideDown is used for showing elements. Following code previews the basic usage of sliding functions.


$("#panel").slideDown("slow");

$("#panel").slideUp("fast");

Duration parameter also works similar to the usage of fading functions. Here, you can see the actual beginning of the animations by moving the element. Consider the following URL for a demo usage of sliding functions.

http://jsfiddle.net/nimeshrmr/nDz6J/

Getting Started with jQuery Animate Function

Most beginners will think that building animations is a quite complex task. Definitely it’s difficult if you are doing it from scratch. jQuery encapsulates all the complexity by providing a single standalone function, which handles any type of animation. Basically, the animations will be created by altering the values of the CSS attributes. Once you get used to the jQuery animate function, building complex animations will become a simple task. Let’s get started by looking at the basic syntax of animate function.


$( "#panel" ).animate({

  // CSS Properties and values

}, 5000, "linear", function() {

  // Completion Handler

});

Preceding code illustrates the syntax for using the animate function. The first parameter contains all the CSS properties and values. The next optional parameter defines the duration of the animation. The third parameter defines the easing( animation type) and the final parameter defines an anonymous function for handling animation completion. Having looked at the basic usage, we can move into creating something practical with jQuery animations.

Animating Image Parts

In this section, we are going to look at how we can display an image by animating image parts. First, we have to split an image into smaller images. You can use the technique provided in my tutorial on Create Jigsaw Puzzle Using jQuery and PHP for splitting images.

Here, is the image that we are going to use for animation.

animations1

Inside the source codes, you will find 12 images generated by splitting the preceding image. Each image will have the dimensions of 150px x 150px. Sub images are divided into 2 rows of 6 blocks. Then all the 6 blocks of each row will be positioned in the right hand corner of the page using the following code.


<div id="img_panel">

    <div class="img_item"><img src="1.jpg" /></div>

    <div class="img_item"><img src="2.jpg" /></div>

    <div class="img_item"><img src="3.jpg" /></div>

    <div class="img_item"><img src="4.jpg" /></div>

    <div class="img_item"><img src="5.jpg" /></div>

    <div class="img_item"><img src="6.jpg" /></div>

    <div class="img_item2"><img src="7.jpg" /></div>

    <div class="img_item2"><img src="8.jpg" /></div>

    <div class="img_item2"><img src="9.jpg" /></div>

    <div class="img_item2"><img src="10.jpg" /></div>

    <div class="img_item2"><img src="11.jpg" /></div>

    <div class="img_item2"><img src="12.jpg" /></div>

</div>

Here, we have separated 12 images into 2 columns using two CSS classes called img_item and img_item2. Now let’s look at the CSS code for positioning images.


    .img_item{

       position: absolute;

       right: 0px;

       opacity:0;

       top :0;

    }

    .img_item2{

       position: absolute;

       right: 0px;

       opacity:0;

       top:150px;

    }

According to the above code, all the images of each row will be hidden and positioned on top of each other using absolute positioning. Now we can look at the jQuery code for generating the image through animations.

$(document).ready(function(){

   var left = 0;

 $(".img_item").each(function(i,val){

           $(this).animate({

               left: left,

               opacity: 1

           }, 1500 );

           left += 150;

   });

   left = 0;

 $(".img_item2").each(function(i,val){

           $(this).animate({

               left: left,

               opacity: 1

           }, 1500 );

           left += 150;

       });

    });

First, we have two selection statements for filtering img_item and img_item2 class items. Then we execute the animate function on the individual elements to convert opacity to 1 and left positioning relative to the preceding image part. Basically, all the image parts will start the animation at the same time providing an output similar to the following image.

animate3

We can use similar effects inside sliders, splash screens, image galleries. Here is the demo of the preceding implementation.

Now you know the basics of working with animate function. Let’s dig deeper into the animation aspects by looking at advanced configurations.

Designing Sequential Animations

In the preceding scenario, all the elements started animating immediately on page load. But sometimes we want sequential animations, where animation of each element starts after the completion of preceding element. So here we are going to load the same image using sequential animations. Let’s start by defining the HTML code.


<div id="img_panel">

    <div class="img_item"><img src="1.jpg" /></div>

    <div class="img_item"><img src="2.jpg" /></div>

    <div class="img_item"><img src="3.jpg" /></div>

    <div class="img_item"><img src="4.jpg" /></div>

    <div class="img_item"><img src="5.jpg" /></div>

    <div class="img_item"><img src="6.jpg" /></div>

    <div class="img_item"><img src="7.jpg" /></div>

    <div class="img_item"><img src="8.jpg" /></div>

    <div class="img_item"><img src="9.jpg" /></div>

    <div class="img_item"><img src="10.jpg" /></div>

    <div class="img_item"><img src="11.jpg" /></div>

    <div class="img_item"><img src="12.jpg" /></div>

</div>

The only change from the previous code is the use of single CSS class instead of two classes for rows. This implementation will generate the rows from jQuery code instead of hard coding using CSS classes. The CSS code for this implementation will be same as the code used for the previous example. Now let’s look at the jQuery code for sequential animation.


    $(document).ready(function(){

       var left = 0;

       var items = $(".img_item");

       animateImg(items,0,0,0);

    });

Once the page is loaded, we get all the image elements using img_item class. Then we pass the items into a function called animateImg for processing animations. The following code provides the implementation of animateImg function.


var indexNum = 1;

 var animateImg = function(items,left,height,indexNum){

 if(items.length >= indexNum){

           var item = items.get(indexNum);

           $(item).animate({

               left: left,

               top : height,

               opacity: 1

           }, 1500 ,function() {

               left += 150;

               indexNum++;

               if(indexNum  % 6 == 0){

                   left = 0;

                   height += 150;

               }

 animateImg(items,left,height,indexNum);

           });

       }

    };

The animateImg function uses four parameters for providing its functionality. The first parameter defines the collection of image items. The second and third parameters define the left and top values of the screen. Initially these 2 values will be set to 0 to start the image from the top left corner of the screen. The fourth parameter is the index number of image for separating them into rows.

First, we check whether we have reached the end of the items array by using an if condition. Then we get the image at the given index number from the items array. Then we call the animate function with a duration of 1500 milliseconds. Next, we increase the index number to get the next element from items array.

In this scenario, we have 2 rows with 6 images each. So we take the module of the index number to check whether we have reached an end of a row. If so, we increase the top value of the image to dynamically create rows. Finally, we call the animateImg function in a recursive manner to traverse through all the elements and generate the complete animation. The following image previews the sequential animation for this scenario.

animate2

Here you can find the demo for the preceding scenario.

As you can see, we have used the animation complete function to execute the animation on the next element. So each animation will start after the preceding one is completed. We can achieve similar functionality with queue functionality of the animate function.

Chaining Animations

Up to this point, we created single animations on each element. In complex scenarios, we need to chain multiple animations on a single element. So let’s modify the preceding example to chain animations.


var animateImg = function(items,left,height,indexNum){

 if(items.length >= indexNum){

           var item = items.get(indexNum);

           $(item).animate({

               left: left,

               top : height,

               opacity: 1

           }, 1500 ,function() {

               left += 150;

               indexNum++;

               if(indexNum  % 6 == 0){

                   left = 0;

                   height += 150;

               }

               console.log(items);

 animateImg(items,left,height,indexNum);

           }).animate({ left:left+150}, 1500);

       }

    };

We can chain animations on elements by calling the animate function multiple times using the dot notation. In the preceding code, we have started another animation after the first animation using .animate function. We can add any number of animations using this technique. Here is the demo of chaining animations.

Wrap Up

In this tutorial, we explored the possibilities of building animations with jQuery animate function. We have looked at various practical techniques when animating the parts of an image to generate the complete image. Now you can continue researching about the things mentioned in the following list for enhancing jQuery animations.

  • Animations queueing
  • Handling animation progress
  • Handling animation steps

Hope you take time to build some amazing animations as we listed in the beginning of this tutorial. Feel free to share and discuss about them using the comments section.

If you enjoyed this article, get email updates (it's free).

Join over 77,235 Subscribers Today.

22 Written ArticlesWebsiteGoogle+

Rakhitha Nimesh is a software engineer and writer from Sri Lanka. He likes to develop applications and write on latest technologies. He is available for freelance writing and WordPress development. You can read his latest book on WordPress Web Application Development. He is a regular contributor to 1stWebDesigner, Tuts+ network and Sitepoint network. Make sure to contact him at www.innovativephp.com or follow him on Twitter and Google+

42 Comments Best Comments First
  • Thiết kế website

    Friday, October 11th, 2013 22:14

    29

    Nice Tutorial, Thanks

    +2
    • Rakhitha Nimesh

      Tuesday, November 26th, 2013 05:54

      40

      Hi Thiết kế website

      Thank you very much.

      0
  • [email protected]

    Wednesday, September 4th, 2013 09:38

    1

    Nice tutorial. Thank you.

    +1
    • Rakhitha Nimesh

      Sunday, September 8th, 2013 20:10

      9

      Thank you very much for taking time to comment.

      +2
  • Karunakaran

    Wednesday, November 20th, 2013 06:48

    35

    Nice Tutorial. You have explained it with clear examples. JQuery for the dynamic UI and Play framework for the MVC part is a combination that tried with considerable success.

    +1
    • Rakhitha Nimesh

      Tuesday, November 26th, 2013 05:50

      36

      Hi Karunakaran

      Thank for your comment and sharing your experiences. As you already have very good experience, can you suggest best practises or issues you had with jQuery animation.

      Thanks

      0
  • Rob Sail

    Saturday, September 7th, 2013 07:52

    5

    A different type of coding, but adobe edge is pretty good for creating web based animations.

    +1
    • Rakhitha Nimesh

      Sunday, September 8th, 2013 20:14

      12

      Hi Rob

      Can you explain what you meant by “different type of coding”. I am not familiar with adobe edge and hence I haven’t seen it’s coding style.

      Can you share your experiences with adobe edge for building similar type of animations?

      Looking forward to your reply.

      +1
  • kunal khosla

    Saturday, September 14th, 2013 04:16

    15

    It’s exhausting to seek out knowledgeable individuals on this matter, however you sound like you realize what you’re talking about! Thanks.

    0
    • Rakhitha Nimesh

      Saturday, September 14th, 2013 10:53

      16

      Hi Kunal

      Thanks for your comment. Did you learn something new from this tutorial? What do you like to see about jQuery animation?

      +1
  • Rakhitha Nimesh

    Sunday, September 8th, 2013 20:09

    7

    Thank you very much for taking time to comment.

    0
  • Daniel Jones

    Wednesday, September 4th, 2013 11:56

    2

    Nice tut, thanks!

    0
    • Rakhitha Nimesh

      Sunday, September 8th, 2013 20:11

      10

      Hi Daniel

      Thank you very much for taking time to comment.

      What is the part that you enjoyed the most in this tutorial?

      0
  • oluwabiyi

    Tuesday, September 24th, 2013 04:00

    18

    Nice tut, find it very educative.

    0
    • Rakhitha Nimesh

      Friday, October 11th, 2013 00:02

      25

      Hi oluwabiyi

      Thank you very much for the comment. :)

      0
  • Prem

    Wednesday, October 2nd, 2013 15:10

    20

    Good tutorial. I am wondering whether JQuery animation can be used to create the effect of book’s page turn as in ipad.
    Or is that some thing beyond the capabilities of JQuery.

    0
    • Rakhitha Nimesh

      Friday, October 11th, 2013 00:06

      27

      Hi Prem

      Thanks for the comment.

      Yes we can implement similar type of effect with jQuery + CSS transformations. But the implementation is complex and hence we should have very good knowledge of both jQuery and CSS to implement such effect.

      0
  • Daniel Poobalan

    Wednesday, October 2nd, 2013 03:51

    19

    I have studied HTML,CSS,PHP and MySQL for years and started developing my own websites . I am also currently learning about JavaScript and its libraries but what if the user disables JavaScript on his or her browser? Wouldn’t jQuery be rendered useless? What are the other alternatives to overcome this problem? Thanks.

    0
    • Rakhitha Nimesh

      Friday, October 11th, 2013 00:09

      28

      Hi Daniel Poobalan

      If the user disables it or bowser doesn’t support it we have no choice. Few years back we used to consider those situations. But now most browsers support all kind of scripting and hence we don’t consider it much.

      If the user disables it we can show a message asking him to enable. If users prefers going without js, then he won’t get any effects. that’s it.

      0
  • Gavin

    Tuesday, September 10th, 2013 02:41

    14

    Rakshitha, Informative, really helpful for beginners like me.

    0
    • Rakhitha Nimesh

      Saturday, September 14th, 2013 10:54

      17

      Hi Gavin

      Thanks for your comment.

      Do you have any queries regarding this article? What do you like to see about jQuery animation?

      0
  • Mark Wienands

    Wednesday, September 4th, 2013 14:07

    3

    I never really fancied jquery to do CSS animations…. the performance is very choppy compared to CSS3 animations accelerated by your GPUs.

    But good tutorial nonetheless.

    0
    • Rakhitha Nimesh

      Sunday, September 8th, 2013 20:17

      13

      Hi Mark

      Agreed. CSS3 animations seems to be improving the performance. Tools such as impress.js has really shown the power of animations with CSS.

      But still there is a high popularity for jQuery animations and hence prompted me to write this tutorial.

      What are the tools or libraries you use for generating CSS animations?

      Thank you.

      0
  • Ruairi Phelan

    Saturday, September 7th, 2013 15:38

    6

    Rakhitha

    Great tutorial. Really like the sequential animation! Looks real pro!

    Thanks

    Ruairi

    0
    • Rakhitha Nimesh

      Sunday, September 8th, 2013 20:10

      8

      Hi Ruairi

      Thank you very much.

      What do you like to see more on jQuery topics?

      0
  • Chris

    Friday, September 6th, 2013 09:17

    4

    Nice. Thank you!

    0
    • Rakhitha Nimesh

      Sunday, September 8th, 2013 20:12

      11

      Hi Chris

      Thank you very much for taking time to comment.

      0
  • Namal

    Sunday, October 6th, 2013 01:16

    21

    really thank you shearing your knowledge ,I’m from Sri Lanka!

    0
    • Rakhitha Nimesh

      Friday, October 11th, 2013 00:01

      24

      Hi Namal

      thanks for the comments. Great to see someone from Sri Lanka participating in the discussion.

      0
  • sinexJackie

    Tuesday, October 8th, 2013 03:11

    22

    Very informative Tut! Would recommend my web designer to go through this tut!, Thanks for sharing and keep going like this.

    0
    • Rakhitha Nimesh

      Friday, October 11th, 2013 00:03

      26

      Hi sinexJackie

      Thanks for the comments and recommending this article. what do you like to see more on 1stWebdesigner?

      0
  • Tapan Kumer Das

    Tuesday, November 19th, 2013 14:34

    34

    Great post. I am just learning jquery and it helps me a lot. Thanks for the post.

    0
    • Rakhitha Nimesh

      Tuesday, November 26th, 2013 05:56

      42

      Hi Tapan Kumer Das

      Thank you very much. It’s a pleasure to help fellow developers and designers.

      0
  • barth

    Thursday, November 14th, 2013 08:29

    33

    goodday,a very good tutorials you made.please am a beginner am currently creating my first site and i want to create animated images with pictures that i have for the site.i want the images to remain align at the center of the sites and slide one after the other on the same position.please how do i do these you can please send the jQuery code to my mail.tnks

    0
  • Nahla

    Saturday, November 9th, 2013 08:51

    32

    Amazing Tutorial , thank u

    0
    • Rakhitha Nimesh

      Tuesday, November 26th, 2013 05:55

      41

      Hi Nahla

      Thank you very much.

      0
  • Pradeeptha

    Thursday, October 10th, 2013 13:04

    23

    Great to have known that i have just read and followed a tutorial by a fellew sri lankan :)

    0
    • Rakhitha Nimesh

      Tuesday, November 26th, 2013 05:54

      39

      Hi Pradeeptha

      Thank you very much. It’s pleasure to get such a comment from fellow Sri Lankan.

      0
  • Michael Bailley

    Saturday, November 2nd, 2013 00:53

    31

    Thanks for the guide. I’m a developer and not a designer. I’m interested to learn this but I feel it might take most of my time. In any case, it’s either me or my girlfriend(designer) that will benefit from it. Thanks again.

    -1
    • Rakhitha Nimesh

      Tuesday, November 26th, 2013 05:53

      38

      Hi Michael Bailley

      I am a developer too. I learned design skills and found out that it’s very easy and effective in building websites as a freelancer. I think it’s worth giving some additional time to learn it.

      -1
  • adolf witzeling

    Wednesday, October 23rd, 2013 11:50

    30

    Great tutorial. I really starting to like this “darn” coding thing ;=)

    -1
    • Rakhitha Nimesh

      Tuesday, November 26th, 2013 05:51

      37

      Hi adolf witzeling

      Thank you very much. What else do you interested in learning?

      0
  • Karunakaran

    Wednesday, November 20th, 2013 06:48

    35

    Nice Tutorial. You have explained it with clear examples. JQuery for the dynamic UI and Play framework for the MVC part is a combination that tried with considerable success.

    +1
    • Rakhitha Nimesh

      Tuesday, November 26th, 2013 05:50

      36

      Hi Karunakaran

      Thank for your comment and sharing your experiences. As you already have very good experience, can you suggest best practises or issues you had with jQuery animation.

      Thanks

      0
  • Tapan Kumer Das

    Tuesday, November 19th, 2013 14:34

    34

    Great post. I am just learning jquery and it helps me a lot. Thanks for the post.

    0
    • Rakhitha Nimesh

      Tuesday, November 26th, 2013 05:56

      42

      Hi Tapan Kumer Das

      Thank you very much. It’s a pleasure to help fellow developers and designers.

      0
  • barth

    Thursday, November 14th, 2013 08:29

    33

    goodday,a very good tutorials you made.please am a beginner am currently creating my first site and i want to create animated images with pictures that i have for the site.i want the images to remain align at the center of the sites and slide one after the other on the same position.please how do i do these you can please send the jQuery code to my mail.tnks

    0
  • Nahla

    Saturday, November 9th, 2013 08:51

    32

    Amazing Tutorial , thank u

    0
    • Rakhitha Nimesh

      Tuesday, November 26th, 2013 05:55

      41

      Hi Nahla

      Thank you very much.

      0
  • Michael Bailley

    Saturday, November 2nd, 2013 00:53

    31

    Thanks for the guide. I’m a developer and not a designer. I’m interested to learn this but I feel it might take most of my time. In any case, it’s either me or my girlfriend(designer) that will benefit from it. Thanks again.

    -1
    • Rakhitha Nimesh

      Tuesday, November 26th, 2013 05:53

      38

      Hi Michael Bailley

      I am a developer too. I learned design skills and found out that it’s very easy and effective in building websites as a freelancer. I think it’s worth giving some additional time to learn it.

      -1
  • adolf witzeling

    Wednesday, October 23rd, 2013 11:50

    30

    Great tutorial. I really starting to like this “darn” coding thing ;=)

    -1
    • Rakhitha Nimesh

      Tuesday, November 26th, 2013 05:51

      37

      Hi adolf witzeling

      Thank you very much. What else do you interested in learning?

      0
  • Thiết kế website

    Friday, October 11th, 2013 22:14

    29

    Nice Tutorial, Thanks

    +2
    • Rakhitha Nimesh

      Tuesday, November 26th, 2013 05:54

      40

      Hi Thiết kế website

      Thank you very much.

      0
  • Pradeeptha

    Thursday, October 10th, 2013 13:04

    23

    Great to have known that i have just read and followed a tutorial by a fellew sri lankan :)

    0
    • Rakhitha Nimesh

      Tuesday, November 26th, 2013 05:54

      39

      Hi Pradeeptha

      Thank you very much. It’s pleasure to get such a comment from fellow Sri Lankan.

      0
  • sinexJackie

    Tuesday, October 8th, 2013 03:11

    22

    Very informative Tut! Would recommend my web designer to go through this tut!, Thanks for sharing and keep going like this.

    0
    • Rakhitha Nimesh

      Friday, October 11th, 2013 00:03

      26

      Hi sinexJackie

      Thanks for the comments and recommending this article. what do you like to see more on 1stWebdesigner?

      0
  • Namal

    Sunday, October 6th, 2013 01:16

    21

    really thank you shearing your knowledge ,I’m from Sri Lanka!

    0
    • Rakhitha Nimesh

      Friday, October 11th, 2013 00:01

      24

      Hi Namal

      thanks for the comments. Great to see someone from Sri Lanka participating in the discussion.

      0
  • Prem

    Wednesday, October 2nd, 2013 15:10

    20

    Good tutorial. I am wondering whether JQuery animation can be used to create the effect of book’s page turn as in ipad.
    Or is that some thing beyond the capabilities of JQuery.

    0
    • Rakhitha Nimesh

      Friday, October 11th, 2013 00:06

      27

      Hi Prem

      Thanks for the comment.

      Yes we can implement similar type of effect with jQuery + CSS transformations. But the implementation is complex and hence we should have very good knowledge of both jQuery and CSS to implement such effect.

      0
  • Daniel Poobalan

    Wednesday, October 2nd, 2013 03:51

    19

    I have studied HTML,CSS,PHP and MySQL for years and started developing my own websites . I am also currently learning about JavaScript and its libraries but what if the user disables JavaScript on his or her browser? Wouldn’t jQuery be rendered useless? What are the other alternatives to overcome this problem? Thanks.

    0
    • Rakhitha Nimesh

      Friday, October 11th, 2013 00:09

      28

      Hi Daniel Poobalan

      If the user disables it or bowser doesn’t support it we have no choice. Few years back we used to consider those situations. But now most browsers support all kind of scripting and hence we don’t consider it much.

      If the user disables it we can show a message asking him to enable. If users prefers going without js, then he won’t get any effects. that’s it.

      0
  • oluwabiyi

    Tuesday, September 24th, 2013 04:00

    18

    Nice tut, find it very educative.

    0
    • Rakhitha Nimesh

      Friday, October 11th, 2013 00:02

      25

      Hi oluwabiyi

      Thank you very much for the comment. :)

      0
  • kunal khosla

    Saturday, September 14th, 2013 04:16

    15

    It’s exhausting to seek out knowledgeable individuals on this matter, however you sound like you realize what you’re talking about! Thanks.

    0
    • Rakhitha Nimesh

      Saturday, September 14th, 2013 10:53

      16

      Hi Kunal

      Thanks for your comment. Did you learn something new from this tutorial? What do you like to see about jQuery animation?

      +1
  • Gavin

    Tuesday, September 10th, 2013 02:41

    14

    Rakshitha, Informative, really helpful for beginners like me.

    0
    • Rakhitha Nimesh

      Saturday, September 14th, 2013 10:54

      17

      Hi Gavin

      Thanks for your comment.

      Do you have any queries regarding this article? What do you like to see about jQuery animation?

      0
  • Rakhitha Nimesh

    Sunday, September 8th, 2013 20:09

    7

    Thank you very much for taking time to comment.

    0
  • Ruairi Phelan

    Saturday, September 7th, 2013 15:38

    6

    Rakhitha

    Great tutorial. Really like the sequential animation! Looks real pro!

    Thanks

    Ruairi

    0
    • Rakhitha Nimesh

      Sunday, September 8th, 2013 20:10

      8

      Hi Ruairi

      Thank you very much.

      What do you like to see more on jQuery topics?

      0
  • Rob Sail

    Saturday, September 7th, 2013 07:52

    5

    A different type of coding, but adobe edge is pretty good for creating web based animations.

    +1
    • Rakhitha Nimesh

      Sunday, September 8th, 2013 20:14

      12

      Hi Rob

      Can you explain what you meant by “different type of coding”. I am not familiar with adobe edge and hence I haven’t seen it’s coding style.

      Can you share your experiences with adobe edge for building similar type of animations?

      Looking forward to your reply.

      +1
  • Chris

    Friday, September 6th, 2013 09:17

    4

    Nice. Thank you!

    0
    • Rakhitha Nimesh

      Sunday, September 8th, 2013 20:12

      11

      Hi Chris

      Thank you very much for taking time to comment.

      0
  • Mark Wienands

    Wednesday, September 4th, 2013 14:07

    3

    I never really fancied jquery to do CSS animations…. the performance is very choppy compared to CSS3 animations accelerated by your GPUs.

    But good tutorial nonetheless.

    0
    • Rakhitha Nimesh

      Sunday, September 8th, 2013 20:17

      13

      Hi Mark

      Agreed. CSS3 animations seems to be improving the performance. Tools such as impress.js has really shown the power of animations with CSS.

      But still there is a high popularity for jQuery animations and hence prompted me to write this tutorial.

      What are the tools or libraries you use for generating CSS animations?

      Thank you.

      0
  • Daniel Jones

    Wednesday, September 4th, 2013 11:56

    2

    Nice tut, thanks!

    0
    • Rakhitha Nimesh

      Sunday, September 8th, 2013 20:11

      10

      Hi Daniel

      Thank you very much for taking time to comment.

      What is the part that you enjoyed the most in this tutorial?

      0
  • [email protected]

    Wednesday, September 4th, 2013 09:38

    1

    Nice tutorial. Thank you.

    +1
    • Rakhitha Nimesh

      Sunday, September 8th, 2013 20:10

      9

      Thank you very much for taking time to comment.

      +2

Comments are closed.

54.242.8.162 - unknown - unknown - US