Animation using jQuery

Web designing is everything about how you decorate your web page, text different objects on the page etc. For decorating text and objects we use certain effects and animation methods using which we are able to move the objects, show or hide it, Fade in or fade out of text or objects etc.

Earlier for doing any these tasks we used javascript or flash. We know by using flash on any websites its loading time increases drastically. So, to avoid it we used javascript but it includes lots of code and that too very tough to understand.

But here, in jQuery for all such types of tasks some very easy to use functions are made that you can use directly and can design your web page with desired animation and effects with just very little code.

For example:- If you you want any text to fade out on mouseover and fade in on mouseout then, you can do it very easily by adding following code to your website:-

<script>
$(document).ready(function(){
  $("p").mouseenter(function(){
    $("p").fadeOut(2000);
      });
$("p").mouseleave(function(){
    $("p").fadeIn(2000);
      });
});
</script>

Similarly, there is a fadeToggle() function that toggles between fadein and fadeout. That means, if you use toggle on a <p> element then if its fadein it will fadeout it and if its fadeout then it will fadein it.

Following is the list of different animation and effects method used in jQuery.

fadeIn(): -This fades in the selected element. Syntax: $(selector).fadeIn(speed, easing,callback). Speed sould be slow, fast or in milliseconds. Easing parameter has two possible values that is swing, linear and callback is a function that you would like to call after fadeIn() function is completed. All the three parameters are optional. For example:- $("p").fadeIn(); 

fadeOut(): -This fades out the selected item. Syntax: $(selector).fadeOut(speed,easing,callback) same as of fadeIn(). For example:- $("p").fadeOut();

fadeToggle(): - This toggles between fadeIn and fadeOut method.
 
fadeTo(): - This could fadeIn/fadeOut to a given opacity. Its value can range in between 0.0 to 1.0. Syntax: $(selector).fadeTo(speed,opacity,easing,callback) where speed and opacity are required parameter.

hide():-This hides the selected item. Syntax: $(selector).hide(speed,easing,callback)

show(): - This shows the selected item. It won't work if the visibility property is set to hidden. Syntax: $(selector).show(speed,easing,callback)

toggle(): - Toggles between hide and show method. Syntax: $(selector).toggle(speed,easing,callback)

slideUp(): - This slides-up or say hide the selected item. Syntax: $(selector).slideUp(speed,easing,callback)

slideDown(): - This slides down the selected item. Syntax: $(selector).slideDown(speed,easing,callback)

slideToggle(): - This toggles between slide up and slide down function. Syntax: $(selector).slideToggle(speed,easing,callback)

stop(): - This stops all the currently running animation. Syntax: $(selector).stop(stopAll, gotoEnd). Both the parameter takes boolean valuse that is true or false.

queue(): -Displays the length of the queue that is, shows the number of functions in a queue to be executed on the selected item. Syntax: $(selector).queue(queuename).

dequeue(): - Removes the next function from the queue and executes the next one.


finish(): - This stops, removes and completes all queued functions of the selected item. Synatx: $(selector).finish(queuename);

delay(): - This helps to set a delay on all the queued functions for the selected element. Syntax:$(selector).delay(speed,queuename)

clearQueue(): - It helps to remove all the remaining queued functions of the selected element. Synatx: $(selector).clearQueue(queuename)

animate(): - This runs a custom animation on the selected element. Synatx: $(selector).animate({styles},speed,easing,callback). Only style paratmeter is required, all others are optional. Styles like height, width, margin, top, left, fontsize etc.