Showing, Hiding, Sliding, and Fading Elements with jQuery

Part of the jQuery For Dummies Cheat Sheet

jQuery effects are great fun and can transform a simple, static Web page into a dynamic, interactive experience for the site visitor. Part of the visual interest that jQuery offers is the capability to show, hide, slide, and fade elements. The examples that follow all use this sample code:

<html>
<head>
<title>My Test Page</title>
<script type="text/javascript" src="js/jquery-1.4.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){

//Your code goes here.

});
</script>
</head>
<body>
<div id="hideme">This is visible.</div>
<div style="display:none" id="showme">This is hidden.</div>
<input id="showme" value="doSomething" type="submit">
</body>
</html>

Here's a quick rundown on how to apply these effects to a <div> element on a Web page.

Effect	Code
Hide	$(":submit").click(function () { $("div").hide(); });
Show	$(":submit").click(function () { $("#showme").show(); });
Slide down	$(":submit").click(function () { $("#showme").slideDown(); });
Slide up	$(":submit").click(function () { $("#hideme").slideUp(); });
Fade in	$(":submit").click(function () { $("#showme").fadeIn(); });
Fade out	$(":submit").click(function () { $("#hideme").fadeOut(); });