In this blog, I’m explaining the sliding effect in jquery and how to use it.
JQuery provides slide methods to slide elements of your document. Jquery provide three methods to show and hide the elements in slide behavior:
1. SlideDown(speed, callback) :- It increases the height of the element, from hidden to visible.
2. SlideUp(speed, callback) :- It decreases the height of the element, from visible to hidden.
3. SlideToggle(speed, callback) :- This method toggles between SildeUp() and SlideDown() for selected elements.
All three methods have "Speed" and "callback" parameters. The Speed parameter can have the following values:
· slow
· normal
· fast
· milliseconds, e.g., 10, 50, 100, etc.
The callback parameter is the name of a function that executes after the function completes.
Example
In this example, we create a collapse box which will be visible when the page loads and when we click on “Click here”, it slide up smoothly and again click on “Click here” it will slide down smoothly and if we click on “Close” – the collapse box will slide up rapidly.
First create an empty asp.net application and add a webform to it.
And write the below code in it:
<%@PageLanguage="C#"AutoEventWireup="true"CodeBehind="CollapseBox.aspx.cs"Inherits="JqueryApp.CollapseBox"%>
<!DOCTYPEhtml>
<htmlxmlns="http://www.w3.org/1999/xhtml">
<headrunat="server">
<title></title>
<scriptsrc="SCRIPT/jquery-1.11.0.min.js"></script>
<scripttype="text/javascript">
$(document).ready(function () {
$("#CollapseHeader").click(function () {
$("#contentArea").slideToggle("slow");
});
$("#Close").click(function () {
$("#contentArea").slideUp(100);
});
});
</script>
</head>
<body>
<formid="form1"runat="server">
<divstyle="width: 400px; border: 2px; border-style: solid; border-color: black;">
<divstyle="background-color: brown; color: white;">
Collapse Box(<ahref="#"id="CollapseHeader"style="color: white;">Click Here</a>)
</div>
<divid="contentArea">
<divalign="right">
<aid="Close"
href="#"style="font-size: 10px;">Close</a>
</div>
Content of Collapse Box<br/>
This collapse box will slide up when you click on "Click Here"
</div>
</div>
</form>
</body>
</html>
Output
Now run the application
When you click on the “Click Here” – the collapse box will slide up like this:
And when you again click on “Click Here” – the collapse box will slide down like this:
And when you click on “Close” – the collapse will slide up rapidly like this:
Leave Comment