Article Categories
- All Categories
-
Data Structure
-
Networking
-
RDBMS
-
Operating System
-
Java
-
MS Excel
-
iOS
-
HTML
-
CSS
-
Android
-
Python
-
C Programming
-
C++
-
C#
-
MongoDB
-
MySQL
-
Javascript
-
PHP
-
Economics & Finance
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, or specific milliseconds. The slow value provides a longer duration, while fast provides a shorter duration compared to the default.
Let us see an example with the 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", "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.
Duration Values
The following duration values can be used to control jQuery effect timing −
- "fast" − 200 milliseconds
- "normal" − 400 milliseconds (default)
- "slow" − 600 milliseconds
- Custom milliseconds − Any number (e.g., 1000, 2000, 5000)
Example
You can try to run the following code to increase the duration of jQuery effects −
<!DOCTYPE html>
<html>
<head>
<title>jQuery Duration Example</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<style>
.target {
width: 200px;
height: 150px;
background-color: #4CAF50;
margin: 20px 0;
display: none;
}
button {
margin: 10px;
padding: 10px;
}
.log {
font-weight: bold;
color: #333;
margin-top: 10px;
}
</style>
</head>
<body>
<h2>jQuery Effect Duration Demo</h2>
<button id="fast">Fast Fade In (200ms)</button>
<button id="slow">Slow Fade In (600ms)</button>
<button id="custom">Custom Fade In (2000ms)</button>
<button id="out">Fade Out</button>
<div class="target"></div>
<div class="log"></div>
<script>
$(document).ready(function() {
$("#fast").click(function(){
$(".target").fadeIn('fast', function(){
$(".log").text('Fast Fade In Complete (200ms)');
});
});
$("#slow").click(function(){
$(".target").fadeIn('slow', function(){
$(".log").text('Slow Fade In Complete (600ms)');
});
});
$("#custom").click(function(){
$(".target").fadeIn(2000, function(){
$(".log").text('Custom Fade In Complete (2000ms)');
});
});
$("#out").click(function(){
$(".target").fadeOut('fast', function(){
$(".log").text('Fade Out Complete');
});
});
});
</script>
</body>
</html>
In this example, you can observe how different duration values affect the speed of the fade effect. The slow parameter creates a longer, more gradual animation, while custom millisecond values give you precise control over the effect duration.
386 Views
