

- Trending Categories
Data Structure
Networking
RDBMS
Operating System
Java
iOS
HTML
CSS
Android
Python
C Programming
C++
C#
MongoDB
MySQL
Javascript
PHP
- Selected Reading
- UPSC IAS Exams Notes
- Developer's Best Practices
- Questions and Answers
- Effective Resume Writing
- HR Interview Questions
- Computer Glossary
- Who is Who
How to increase the duration of jQuery effects?
To increase the duration of jQuery effects, set the optional speed parameter. The values include, slow, fast, milliseconds, etc. The fast value is used to increase the duration.
Let us see an example with fadeIn() jQuery method. The fadeIn( ) method fades in all matched elements by adjusting their opacity 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", "def", 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.
You can try to run the following code to increase the duration of jQuery effect −
Example
<html> <head> <title>The jQuery Example</title> <script src = "https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> <script language = "javascript"> $(document).ready(function() { $("#in").click(function(){ $(".target").fadeIn( 'fast', function(){ $(".log").text('Fade In Transition Complete'); }); }); $("#out").click(function(){ $(".target").fadeOut( 'slow', function(){ $(".log").text('Fade Out Transition Complete'); }); }); }); </script> <style> p {background-color:#bca; width:200px; border:1px solid green;} </style> </head> <body> <p>Click on any of the buttons</p> <button id = "out"> Fade Out </button> <button id = "in"> Fade In</button> <div class = "target"> <img src = "/images/jquery.jpg" alt = "jQuery" /> </div> <div class = "log"></div> </body> </html>
- Related Questions & Answers
- How do I use jQuery effects?
- How does jQuery effects queueing work?
- How to determine if jQuery effects are still executing?
- How to disable all animations and effects for jQuery?
- What are the options for jQuery Animated Effects?
- What are the methods used to provide effects in jQuery?
- What are the Effects of Cyberwarfare?
- How to increase the font size of a Text widget?
- How to increase the line thickness of a Seaborn Line?
- What are the effects of Share Buyback?
- How to increase twitter followers?
- How to create CSS3 Transition Effects?
- How can we increase the effectiveness of our communication?
- How to increase the thickness of histogram lines in base R?
- How to increase the font size of text in Arduino IDE?
Advertisements