jQuery Animation

Effect Method

hide() - It hides exposed element

show() - It shows hidden element

toggle() - Hidden element is exposed and vice versa

fadeIn() - Hidden element is being gradually shown

fadeOut() - Exposed element is being gradually hidden

fadeToggle() - Exposed element is being hidden and vice versa

fadeTo() - Exposed element is hidden as much as appointed transparency

slideDown() - Hidden element is exposd by spreading at downside

slideUp() - Exposed element is hidden by folding at upside

slideToggle() - Hidden element is exposed by spreading at downside and vice versa

animate() - Apply animation to selected element


$("element").hide("effect speed", callback function);
$("element").show("effect speed", callback function);
$("element").toggle("effect speed", callback function);
$("element").fadeOut("effect speed", callback function);
$("element").fadeIn("effect speed", callback function);
$("element").fadeToggle("effect speed", callback function);
$("element").slideUp("effect speed", callback function);
$("element").slideDown("effect speed", callback function);
$("element").slideToggle("effect speed", callback function);

effect speed - fast, normal, slow, 1000 (1sec), 3000(3sec), etc

callback function - It is executed after finishing effect (can be omitted) 


$("element").fadeTo("effect speed", transparency, callback function);

transparency - you can appoint specific extent of the transparency


$("element").animate({animation property}, "effect speed", callback function);

animation property - Input CSS for applying property ex) margin-left:100px;

---------------------------------------------------------------------------------------------------------

Effect Control Method

stop() - It stops all executing effect

delay() - Delay standing by effect as much as appointed amount

queue() - Return standing by a queue to the stack of the selected element or enable to add exec statement of the function to the queue

clearqueue() - Execute only effect or animation corresponding to the first queue and delete every standing by queue

dequeue() - Delete all the queue accumulated to the stack

finish() - Finish after executing animation of the selected element go to the time of completion forcefully