Next Index Previous

Programs in jQuery

24. slideDown example in jquery.


<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Untitled Document</title>
<style>
h3{
	width:300px;
	border:1px solid #CCC;
	text-align:center;
}
#msg{
	width:600px;
	height:100px;
	background-color:#0CF;
}
</style>
<script src="jquery-1.10.2.min.js"></script>
<script>
$(document).ready(function() {
	
	$("#msg").hide();
    $("h3").click(function(){
		
		$("#msg").slideDown(1000);
		
	});
	
});
</script>
</head>

<body>
<h3>Click to slide down</h3>
<div id="msg">
Lorem Ipsum is simply dummy text of the printing and typesetting industry.
Lorem Ipsum has been the industry's standard dummy text ever since the 1500s,
when an unknown printer took a galley of type and scrambled it to make a type specimen book.
</div>
<p>jQuery effects</p>
</body>
</html>


Output :

Click to slide down

Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.

jQuery effects



Creater of JQuery


John Resig

John Resig

Born: May 8, 1984, Boston, U.S.A.