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’});
});

News Reporter
IT Software and web development, Core PHP, JavaScript, JQuery, HTML, CSS, CakePHP, Angularjs, Codeigniter etc.

Leave a Reply

Your email address will not be published. Required fields are marked *

error: