In this post you can learn all jQuery Effects and how to use.
jQuery Hide/Show Effects-
hide()
$(“tageName,.Class,#ID”).click(function(){
$(“tageName,.Class,#ID”).hide();
});
show()
$(“tageName,.Class,#ID”).click(function(){
$(“tageName,.Class,#ID”).show();
});
toggle()
$(“tageName,.Class,#ID”).click(function(){
$(“tageName,.Class,#ID”).toggle();
});
Also example with callback function.
$(“tageName,.Class,#ID”).click(function(){
$(“tageName,.Class,#ID”).show(speed, function(){
//do some action
});
});
jQuery Fade Effects-
fadeIn()
$(“tageName,.Class,#ID”).click(function(){
$(“tageName,.Class,#ID”).fadeIn();
});
fadeOut()
$(“tageName,.Class,#ID”).click(function(){
$(“tageName,.Class,#ID”).fadeOut();
});
fadeToggle()
$(“tageName,.Class,#ID”).click(function(){
$(“tageName,.Class,#ID”).fadeToggle();
});
fadeTo()
$(“tageName,.Class,#ID”).click(function(){
$(“tageName,.Class,#ID”).fadeTo(“slow”, 0.15);
});
jQuery Hide Effects-
slideDown()
$(“tageName,.Class,#ID”).click(function(){
$(“tageName,.Class,#ID”).slideDown();
});
slideUp()
$(“tageName,.Class,#ID”).click(function(){
$(“tageName,.Class,#ID”).slideUp();
});
slideToggle()
$(“tageName,.Class,#ID”).click(function(){
$(“tageName,.Class,#ID”).slideToggle();
});
jQuery Animation Effects-
animate()
$(selector).animate({params},speed,callback);
Example:
$(“tageName,.Class,#ID”).click(function(){
$(“Specific element tag or class or id”).animate({left: ‘100px’});
});