jQuery Show and Hide Effects Example

$(selector).show();  
$(selector).show(speed, callback);
$(selector).show(speed, easing, callback);
<!DOCTYPE html>  
<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
<script>
$(document).ready(function(){
$("#hide").click(function(){
$("p").hide();
});
$("#show").click(function(){
$("p").show();
});
});
</script>
</head>
<body>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit.</br>
Nam sed est in ex lobortis commodo vitae in elit. </br>
Praesent eu turpis finibus, elementum tortor ut, bibendum nunc.</p>
<button id="hide">Hide</button>
<button id="show">Show</button>
</body>
</html>

jQuery show() effect with speed parameter

$(document).ready(function(){  
$("#hide").click(function(){
$("p").hide(1000);
});
$("#show").click(function(){
$("p").show(1500);
});
});
$(selector).hide();  
$(selector).hide(speed, callback);
$(selector).hide(speed, easing, callback);
<!DOCTYPE html>  
<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
<script>
$(document).ready(function(){
$("#hide").click(function(){
$("p").hide();
});
});
</script>
</head>
<body>
<p> Lorem ipsum dolor sit amet, consectetur adipiscing elit.</br>
Nam sed est in ex lobortis commodo vitae in elit. </br>
Praesent eu turpis finibus, elementum tortor ut, bibendum nunc.</p>
<button id="hide">Hide</button>
</body>
</html>

--

--

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store