Posts
Jquery Effects: Sliding Elements
.
.slideDown()
- Jquery slideDown() show a selected element to given parameter or default parameter values.
- A selected element has visible downwards in a sliding motion.
Syntax
$(selector).slideDown(speed,easing,callback)
| Parameter | Parameter Type | Parameter Description |
|---|---|---|
| Speed | String,Numbers | Contains "slow","fast" default values and milliseconds-user defined.Ex:200. |
| Easing | String | Give more easy animation to an Html canvas element.Ex:swing, easeOutCubic etc,. |
| callback | Functions (optional parameter) | Passed arguments to other functions when a methods are finised. |
.slideUp()
- Jquery slide up() hide a selected element at upwards.
- It is invisible an element to a sliding motion.
Syntax
$(selector).slideUp(speed,easing,callback)
| Parameter | Parameter Type | Parameter Description |
|---|---|---|
| Speed | String,Numbers | Contains "slow","fast" default values and milliseconds-user defined.Ex:200. |
| Easing | String | Give more easy animation to an Html canvas element.Ex:swing, easeOutCubic etc,. |
| Callback | Functions (optional parameter) | Passed an arguments to another functions when a methods are finised. |
.slideToggle()
- Jquery slideToggle() toggling an element in sliding motion.
- A shown element to be hidden and a hidden element to be shown.
Syntax
$(selector).slideToggle(speed,easing,callback)
| Parameter | Parameter Type | Parameter Description |
|---|---|---|
| Speed | String,Numbers | Contains "slow","fast" default values and milliseconds-user defined.Ex:200. |
| Easing | String | Give more easy animation to an Html canvas element.Ex:swing, easeOutCubic etc,. |
| callback | Functions (optional parameter) | Passed arguments to other functions when a methods are finised. |
<!DOCTYPE html >
<html lang="en-us">
<head>
<title>Jquery Show method</title>
<meta charset="utf-8" />
<script src="jquery-1.11.1.min.js" type="text/javascript"></script>
</head>
<body>
<p>This is a paragraph that demonstrate a slideDown(),slideUp() and slideToggle() methods.</p>
<p>It's animate this 'p' element.</p>
<button class="btn1"<slideDown</button>
<button class="btn2"<slideUp</button>
<button class="btn3"<slideToggle</button>
<script type="text/javascript">
$(document).ready(function () {
$(".btn1").click(function () {
$("p").slideDown(200);
});
$(".btn2").click(function () {
$("p").slideUp("slow");
});
$(".btn3").click(function () {
$("p").slideToggle("slow",0.7);
});
})
</script>
</body>
</html>
This is a paragraph that demonstrate a slideDown(),slideUp() and slideToggle() methods.
It's animate this 'p' element.
Do you know:-
- How to filter contents with jQuery
- jQuery | Basic filter() with Examples
- Jquery Hierarchy Selectors|Child Selector (“parent > child”)
- [jQuery] attribute Selector
- Jquery | Basic Selectors
- [jQuery] :Even Selector
- Jquery Overview
- How to Retrieve data using dataset in c#
- “Login failed for user” SQLConnection using C#
- How can I prevent the browser back button After Logout
- Calendar Control in c# Windows Application
- Timer tick event in c# windows application
- How to delete record in c# using the connected approach
- [Connect] to Database c# Through Code
- The Command Class | C# | TrickCode
- C# DataReader ADO.NET |Trickcode
- What is disconnected data access?
- how to Adding Parameters to Commands
- SQL Basics?
- What is Database Preparations?
- SQL vs NoSQL or MySQL vs MongoDB
- What is data provider in C#?
- What is connection string C#?
- [SQL] SELECT Statement | Example
- how to get return value from stored procedure in sql server
- how to prevent sql injection attacks
- What is Database? What is SQL?
If you like the tutorial, then please share this tutorial with your friends on social media.
Post A Comment:
0 comments: