jQuery is an open-source JavaScript library that simplifies the interactions between an HTML/CSS document, or more precisely the Document Object Model (DOM), and JavaScript. Elaborating the terms, jQuery simplifies HTML document traversing and manipulation, browser event handling, DOM animations, Ajax interactions, and cross-browser JavaScript development.
jQuery provides a trivially simple interface for doing various kinds of amazing effects. jQuery Effects are used to create commonly used visual effects.
Syntax:
$(selector).effect.method(para1, para2, ...);
Example: This example describes fadeIn() method with speed 1000 millisecond
HTML
<!DOCTYPE html>
<html>
<head>
<script src=
</script>
<title>
fadeIn() Method in jQuery
</title>
<style>
#Outer {
border: 1px solid black;
padding-top: 40px;
height: 140px;
background: green;
display: none;
}
</style>
</head>
<body style="text-align:center;">
<div id="Outer">
<h1 style="color:white;">
GeeksForGeeks
</h1>
</div><br>
<button id="btn">
Fade In
</button>
<script>
$(document).ready(function () {
$("#btn").click(function () {
$("#Outer").fadeIn(1000);
});
});
</script>
</body>
</html>
|
Output:
The complete list of jQuery Effects are given below:
jQuery Effects | Description | Example |
|---|
| animate() | Change the state of the element with CSS style. | |
| clearQueue() | Removes all items from the queue that have not yet been run | |
| delay() | Set a timer to delay the execution of the next item in the queue | |
| dequeue() | Remove the next function from the queue and then it will execute the function. | |
| fadeIn() | Change the opacity of selected elements from hidden to visible. | |
| fadeOut() | Change the level of opacity for selected elements from visible to hidden. | |
| fadeTo() | Change the opacity of the selected element. | |
| fadeToggle() | If elements are faded out, fadeToggle() will fade in and vice versa. | |
| finish() | Stop the animations running at the present time. | |
| hide() | Hide the selected element. | |
| queue() | It is used with the dequeue() method. | |
| show() | It is used to display the hidden and selected elements. | |
| slideUp() | Hide the selected elements. | |
| stop() | Stop the currently running animations for the selected element. | |
| toggle() | Check the visibility of selected elements to toggle between hide() and show() for the selected elements. | |