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 () { }); |
| 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(); }); |
dummies
Source:http://www.dummies.com/how-to/content/showing-hiding-sliding-and-fading-elements-with-jq.html
No comments:
Post a Comment