Sliding Effect using jQuery

Sapna
13y
15k
0
0

Article

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.

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