Data Structure
Networking
RDBMS
Operating System
Java
MS Excel
iOS
HTML
CSS
Android
Python
C Programming
C++
C#
MongoDB
MySQL
Javascript
PHP
Physics
Chemistry
Biology
Mathematics
English
Economics
Psychology
Social Studies
Fashion Studies
Legal Studies
- Selected Reading
- UPSC IAS Exams Notes
- Developer's Best Practices
- Questions and Answers
- Effective Resume Writing
- HR Interview Questions
- Computer Glossary
- Who is Who
What are the options for jQuery Animated Effects?
jQuery animated effected can be achieved with methods such as animate, slideDown(), slideToggle(), etc. This created an animation effect in an HTML web page using jQuery. The following table lists down some of the important methods to create different kind of effects:
| S. No | Methods & Description |
| 1. | animate( params, [duration, easing, callback] ) A function for making custom animations. |
| 2. | fadeIn( speed, [callback] ) Fade in all matched elements by adjusting their opacity and firing an optional callback after completion. |
| 3. | fadeOut( speed, [callback] ) Fade out all matched elements by adjusting their opacity to 0, then setting display to "none" and firing an optional callback after completion. |
| 4. | fadeTo( speed, opacity, callback ) Fade the opacity of all matched elements to a specified opacity and firing an optional callback after completion. |
| 5. | toggle( ) Toggle displaying each of the set of matched elements. |
Here’s an example of slideToggle() method, which toggles the visibility of all matched elements by adjusting their height and firing an optional callback after completion.
Here is the description of all the parameters used by this method −
- speed − A string representing one of the three predefined speeds ("slow", "normal", or "fast") or the number of milliseconds to run the animation (e.g. 1000).
- callback − This is optional parameter representing a function to call once the animation is complete.
Example
You can try to run the following code to learn how to work with slideToggle() method to create an animation effect:
<html>
<head>
<title>The jQuery Example</title>
<script src = "https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script>
$(document).ready(function() {
$("#toggle").click(function(){
$(".target").slideToggle( 'slow', function(){
$(".log").text('Toggle Transition Complete');
});
});
});
</script>
<style>
p {
background-color:#bca;
width:200px;
border:1px solid green;
}
</style>
</head>
<body>
<p>Click on the following button:</p>
<button id = "toggle"> Toggle </button>
<div class = "target">
<img src = "../images/jquery.jpg" alt = "jQuery" />
</div>
<div class = "log"></div>
</body>
</html>
Updated on: 12-Dec-2019
75 Views
Advertisements