Introduction: In this article we will
explore the effect using jQuery. As we
know, sliding means how to move something from its actual position to
its destination position. In this article, we will create an example of moving an image on a button click.
Step 1: Firstly we have to
take a web Application.
- Go to Visual Studio 2010
- Open the web Application
- Click OK.
![Web Application]()
Step 2: Secondly you have to add a new
page to the website.
- Go to the Solution Explorer.
- Right Click o Project name.
- Select add new item.
- Add new web page and give it a name.
- Click OK.
![Add New Item]()
![New Web Page]()
Step 3: In this step you have to
add some images to the project.
![Add Images]()
Step 4: In this step you have to
create a style sheet and the code of style sheet is given below. it will set all the margin and position of
the div and header we are taking in the program and also set the width and
height of the div.
Code:
<style
type="text/css">
body
{
margin:
0;
font-size:16px;
color:
#000000;
font-family:Arial,
Helvetica, sans-serif;
}
#s_Wrap
{
margin:
0 auto;
width:
300px;
}
#slider {
position:
absolute;
background-image:url(slider1.png);
background-repeat:no-repeat;
background-position:
bottom;
width:
300px;
height:
159px;
margin-top:
-141px;
}
#slider
img {
border-style: none;
border-color: inherit;
border-width: 0;
width: 38px;
height: 21px;
}
#s_Content
{
margin:
50px 0
0 50px;
position:
absolute;
text-align:center;
background-color:#FFFFCC;
color:#333333;
font-weight:bold;
padding:
10px;
}
#header {
margin:
0 auto;
width:
600px;
background-color:
#F0F0F0;
height:
200px;
padding:
10px;
}
#opclWrap
{
position:absolute;
margin:
143px 0
0 120px;
font-size:12px;
font-weight:bold;
}
</style>
Step 5: In this step we
have to add the reference of the js library.
![Script Reference]()
Step 6: Now add the script
file references.
![JQuery script]()
Step 7: Now we have to
write the code for jQuery to the source file of default2.aspx file which is
given below you may write it into either head or body section.
![jQuery Code]()
Code Description: Here we
are taking a simple a function $(document).ready(function(){}) inside the ready
function we are taking the $(".t_MenuAction").click(function () function of
jQuery by clicking on that we will see a sliding effect but after taking this we
are going to check the condition named as if ($("#ocIdentifier").is(":hidden"))
means "#ocIdentifier" is id of the div at which we are checking that if it is
hidden then performing the task given $("#slider").animate() whcih is used to
animate the slider by setting their margin and how much time it will display and
.html() method is used to allows the HTML content to be set by passing in a
function. $("#ocIdentifier").show(); will used to move that slider and In
the else part of the condition we will hide that slider on their actual position
by calling it's hide function.
Step 8: In this step we
will see the complete code for the whole project which will be write at the
source page of the default2.aspx page.
Code:
<%@
Page Language="C#"
AutoEventWireup="true"
CodeFile="Default2.aspx.cs"
Inherits="Default2"
%>
<!DOCTYPE
html PUBLIC
"-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html
xmlns="http://www.w3.org/1999/xhtml">
<head
runat="server">
<title>sliding
menu</title>
<script
type="text/javascript"
src="Scripts/jquery-1.4.1.min.js"></script>
<style
type="text/css">
body
{
margin:
0;
font-size:16px;
color:
#000000;
font-family:Arial,
Helvetica, sans-serif;
}
#s_Wrap
{
margin:
0 auto;
width:
300px;
}
#slider {
position:
absolute;
background-image:url(slider1.png);
background-repeat:no-repeat;
background-position:
bottom;
width:
300px;
height:
159px;
margin-top:
-141px;
}
#slider
img {
border-style: none;
border-color: inherit;
border-width: 0;
width: 38px;
height: 21px;
}
#s_Content
{
margin:
50px 0
0 50px;
position:
absolute;
text-align:center;
background-color:#FFFFCC;
color:#333333;
font-weight:bold;
padding:
10px;
}
#header {
margin:
0 auto;
width:
600px;
background-color:
#F0F0F0;
height:
200px;
padding:
10px;
}
#opclWrap
{
position:absolute;
margin:
143px 0
0 120px;
font-size:12px;
font-weight:bold;
}
</style>
</head>
<body
bgcolor="#ffff66">
<script
type="text/javascript">
$(document).ready(function () {
$(".t_MenuAction").click(function
() {
if ($("#ocIdentifier").is(":hidden"))
{
$("#slider").animate({
marginTop: "-141px"
}, 600);
$("#t_MenuImage").html('<img
src="opennew2.gif" alt="open" />');
$("#ocIdentifier").show();
} else {
$("#slider").animate({
marginTop: "0px"
}, 600);
$("#t_MenuImage").html('<img
src="closenew2.gif" alt="close" />');
$("#ocIdentifier").hide();
}
});
});
</script>
<div
id="s_Wrap">
<div
id="ocIdentifier"></div>
<div
id="slider">
<div
id="s_Content"
style="font-family:
'Comic Sans MS'; font-size:
large; background-color:
#F4E955">
Thanks to open slider!!!
</div>
<div
id="opclWrap">
<a
href="#"
class="t_MenuAction"
id="t_MenuImage">
<img
src="opennew2.gif"
alt="open"
/>
</a>
</div>
</div>
</div>
<div id="header"
style="font-family:
'Comic Sans MS'; font-size:
large; background-color:
#F0AC0F">
<p></p>
<br/>
<br/>
<br/>
<a
href="#"
class="t_MenuAction">Click
me</a>
or the open/close Icons. I will stay behind the slider.
</div>
</body>
</html>
Step 9: In this step we
will see the design page of the default2.aspx, which is given below.
![Design of Page]()
Step 10: In this we will
see the output by running the application by pressing F5.
Output: Before Click of the folder Icon.
![Before Click]()
Output: After Click on folder icon.
![After Click]()