jQuery effects



  Doing simple animations:
    1) Hide and Show effects: Hide and show effects can created by using .hide() and .show(). Here these functions can take arguments in numbers or predefined as "slow", "normal" & "fast". These changes the speed of the animation. However we can define as "6000" or "100" etc.
 Ex: $('div').hide();
    This will hide the contents which are inside the div tag.








2) Fade In & Fade Out : These are the functions which fades the content in and out. Fade Out hides the content whereas Fade In will show the content. Speed of the animation can be  varied by using 'slow','fast','normal' or by giving in numbers as above.
Ex: $('div').fadeIn(); 
      $('div').fadeOut();

This code snippet will fade-in and fade-out the objects which are inside the div tag.




3)Slide Up & Slide Down: These functions will give slide-up, slide-down animations to the referenced arguments.Once again speed can be given as normal, fast or slow.
Ex: $("div").slideUp('normal');
      $("div").slideDown('fast');




        Slide Toggle: We come across some situation in which we need to toggle the display states using only one button. In that case slide-toggle function will help. When this function is called it toggles with previous state and displays the content. In order to control the speed of the animation we can use "normal","fast","slow" as parameters.
Ex: $("div").slideToggle("normal");




4) insertAfter: Suppose we want to insert any string or any element after some elements or at particular instance at that time insertAfter function is used. Element tags which are to be inserted can be sent as parameters to this function.
Ex: $("here comes the string").insertAfter("div#text");
     Here string which is to be inserted is written first and then the div element with id after which it should be inserted.


this is the example for insertAfter operation

1 comment: