Online Test Banks
Score higher
See Online Test Banks
eLearning
Learning anything is easy
Browse Online Courses
Mobile Apps
Learning on the go
Explore Mobile Apps
Dummies Store
Shop for books and more
Start Shopping

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();
});
  • Add a Comment
  • Print
  • Share
blog comments powered by Disqus
Advertisement

Inside Dummies.com

Dummies.com Sweepstakes

Win $500. Easy.