jquery show effects demo
.show() is a jQuery method that displays hidden elements on your page.
Set up the HTML and CSS
In this example, we will use the method .show() to make a hidden element appear when clicking a button.HTML and CSS for the element that is not displayed:
<style type="text/css"> #hidden-element{ display:none; } </style> <div id="hidden-element">Hello world</div>
<input type="button" id="button-show" value="Click me" />
Set up the jQuery code
<script> $(function(){ $('#button-show').click(function(){ $('#hidden-element').show(); }); }); </script>
When the element with the id 'button-show' is clicked, the element with the id 'hidden-element' is displayed.
show() parameters and options
Duration
You can specify a duration in the show() to change the speed of the animation when the element appears on the page.
The duration can take the following values:
- slow (200 milliseconds)
- fast (600 milliseconds)
- any duration in milliseconds
<style type="text/css"> #hidden-element{ display:none; } </style> <input type="button" id="button-show" value="Click me" /> <div id="hidden-element">Hello world</div> <script> $(function(){ $('#button-show').click(function(){ $('#hidden-element').show('slow'); }); }); </script>
Callback
A callback is a function that is called when the animation is complete. When using show(), the callback function will be called when the element is entirely displayed on the page.Example:
When the button below is clicked, the animation begins and then a javascript 'alert' dialog box opens when the animation is over.
<style type="text/css"> #hidden-element{ display:none; } </style> <input type="button" id="button-show" value="Click me" /> <div id="hidden-element">Hello world</div> <script> $(function(){ $('#button-show').click(function(){ $('#hidden-element').show( function(){alert('Animation is complete!')} ); }); }); </script>
Do you know:-
- 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?
- C#.Net How To: Send email in asp.net using c#
If you like the tutorial, then please share this tutorial with your friends on social media.
Post A Comment:
0 comments: