Library Technology – Reviews, Tips, Giveaways, Freeware

A complete know-how about working with jQuery animations

Posted In Java development, Webmaster - By Techtiplib on Tuesday, November 25th, 2014 With No Comments »

Design plays a vital role in deciding the success or failure of a website. No matter what the basic purpose of your website is, if it has an eye-catchy design, you can definitely witness people coming back to you again and again. As compared to plain, traditional static web designs, the interactive designs have been more successful in gathering the attention of targeted audiences. As the technology has advanced, so have the web design approaches. Even though, HTML and CSS still remain two of the best-used web design and development technologies, the inception of jQuery has introduced an added flexibility of designing interactive websites and web apps. If you’re a beginner in jQuery then this is a blog you can’t miss for sure. Here, I’ve covered some great insights on working with jQuery animations.

jQuery animations

What’s the practical use of jQuery animations?

As a beginner, it is crucial for you to understand the practical use of jQuery animations. Well, these animations are basically used for designing interactive elements including sliders, scrollers, menus etc.

A brief on jQuery animate() function

jQuery animate() is a powerful API that allows you to manipulate all the HTML elements, in addition to adding animation functionality into the web apps and website. Well, the syntax of jQuery animate() function is as shown below:

.animate( properties, [ duration ], [ easing ], [ callback ] )

In the above syntax,

  • properties: it refers to a map of CSS properties that the respective animation would move towards.
  • Duration: it refers to a string or number that determines the time duration for which the animation will run
  • erasing: it refers to a string that indicates the erasing function that’s used for the transition
  • callback: it refers to the function that needs to be called once the animation has been completed.

Hiding and displaying elements using jQuery

When using jQuery animations and effects, showing and hiding elements seems to be an easy job. All you need to do is simply pass in a numeric value which will serve as the time duration that the respective element would take to show/hide on the screen. For example, if you want the elements to show/hide at a speed of 5 seconds, then simply key in the number as 5000. In addition to this, you can also opt for specifying a speed for showing or hiding the elements. For example, you can simply pass in the string as slow, normal or fast.

Using jQuery for sliding page elements

Yet another method of showing and hiding elements on the screen, sliding is something that’s being paid special attention to, by the jQuery users. With jQuery, you can conveniently slide the web page elements up or down or simply toggle the slide effect.

Using jQuery for creating custom animations

As an extension to the pre-built animation and effects methods available in jQuery library, the framework comes with a lot of other methods that can be conveniently used for animating elements on the web pages. Here, it is also interesting to note that the animate method() only works on CSS properties containing numeric values.

Chaining jQuery Animations

In complex websites and web apps, where there’s a need for chaining multiple animations on a single elements, all you need to do is simply tweak the code a bit as shown in the example below:

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

       } 

    };

Looking at the above code snippet, it is clear that you can chain animations on elements by simply calling the animate function multiple times with the help of dot notation. Moreover, you can also choose to add any number of animations using the same code snippet.

Wrapping Up

With ample number of techniques available for animating the elements on a web page, it is up to you to gather some refined information on the same. Here’s hoping my blog would have served as an eye-opener for all those who believe jQuery animations to be a less important topic of discussion. 

Author Bio:

Celin Smith is renowned web developer and blogger at Xicom who loves to write regarding mobile and web applications. Xicom is one of the amongst leading ASP.NET Development Outsourcing Services which provides totally different array of real software package solutions like Custom software Development IT Outsourcing Services, Web Application Development services to its clients globally.

About - Hey, this blog belongs to me! I am the founder of TechTipLib and managing editor right now. And I love to hear what do you think about this article, leave comment below! Thank you so much...