Apply Sliding Effect using JQuery
Step 1: Download the latest jquery jquery-1.3.2.js
You can download above file from http://docs.jquery.com/Downloading_jQuery
Step 2: Create one default.aspx page
Step 3: Reference the javascript that you download 1.3.2.js
Step 4: There is three different method for sliding
Method 1: Slide Down
$("#divslidedown").slideDown("slow");
Description:
divslidedown-id of div tag
You can use predefined speed(slow,normal,fast) as a
parameter in slideDown method.
You can also use number of milisecond.e.g. slideDown(1000)
Method 2: Slide Up
$("#divhide").slideUp(3000)
Description:
divhide- id of div tag
You can use predefined speed(slow,normal,fast) as a
parameter in slideUp method.
You can also use number of milisecond.e.g. slideDown(1000)
Method 3: slide Toggle
$("#divtoggle")slideToggle("slow").
Description:
divtoggle-id of div tag
You can use predefined speed(slow,normal,fast) as a
parameter in slideDown method
You can also use number of milisecond.e.g. slideToggle(1000)
Page code is here
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN""http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<script src="http://www.webintenta.com/Files/jquery.js" type="text/javascript" ></script>
<script language="javascript" type="text/javascript" >
$(document).ready(function(){
$("#ashow").click(function () {
$("#divtest").slideDown("slow");
});
$("#ahide").click(function () {
$("#divhide").slideUp(3000)
});
$("#atoggle").click(function () {
$("#divtoggle").slideToggle("slow")
});
});
</script>
<style type="text/css" >
.para{
background:#de9a44; margin:3px; width:350px;
height:75px;display:none;
}
.hide
{
background:#de9a44; margin:3px; width:350px;
height:75px;display:block;
}
.toggle
{
background:#de9a44; margin:3px; width:350px;
height:75px;display:none;
}
</style>
</head>
<body>
<h3>Read the description of a method in dark yellow block</h3>
<div>
<a href="#" id="ashow" >click me(Show Only)</a>
</div>
<div id="divtest" class="para" >
Show the content. I have used slideDown("slow").
You can use predefined speed(slow,normal,fast) as a
parameter in slideDown method.
You can also use number of milisecond.e.g. slideDown(1000)
</div>
<div>
<a href="#" id="ahide" >click me(Hide Only)</a>
</div>
<div id="divhide" class="hide" >
Hide the content. I have used slideUp(3000).
You can use predefined speed(slow,normal,fast) as a
parameter in slideDown method
You can also use number of milisecond.e.g. slideUp(1000)
</div>
<div>
<a href="#" id="atoggle" >click me(Toggle)</a>
</div>
<div id="divtoggle" class="hide" >
Show/Hide the content. I have used slideToggle("slow").
You can use predefined speed(slow,normal,fast) as a
parameter in slideDown method
You can also use number of milisecond.e.g. slideToggle(1000)
</div>
<div>Reference: http://docs.jquery.com</div>
</body>
</html>
