Friday, October 7, 2011

Playing with Hide and Show Jquery with animation

Hi guys,

Today I really had nothing to do so I decided to write down some jQuery tutorial.

So its about hide and show functions of jQuery.
If you are familiar with jQuery then you probably used them already but for those new to it you might find this one enlightening ^_^

So basically hide() is the simplest way to make an element disappear.
It can be called without any parameter like:

$("#hideMe1").hide();
//or with parameters 
 var duration = 5000; //in milliseconds or strings "slow" or "fast"
 $("#hideMe2").hide(duration, function(){ alert("Im hidden"); });


 While show() is the obviously does the opposite.


$("#showMe1").show(); 
//or
$("#showMe2").show("fast",function(){ alert("I've been revealed!"); });

You can also use the animation method of jQuery if you like and if you needed more than just hide and show

sample:

//hide and show with movement
$("#animateMe1").animate({ opacity: 0, marginLeft: "15px"},2000);

$("#animateMe2").animate({ opacity: 1, marginLeft: "15px"},2000); //supposing the element have zero opacity