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 methods used to provide effects in jQuery?
jQuery effect methods are used to create custom animation effects. The following are some of the methods used to provide effects in jQuery −
S.No | Method | Description |
1 | animate() | Custom animation on the selected elements |
2 | clearQueue() | To remove remaining queued functions from the selected elements |
3 | delay() | To set a delay for all queued functions on the selected elements |
4 | dequeue() | To remove the next function from the queue, and then executes the function |
5 | fadeIn() | Fades in the selected elements |
6 | fadeOut() | Fades out the selected elements |
7 | fadeTo() | Fades in/out the selected elements to a given opacity |
8 | fadeToggle() | To Toggle between the fadeIn() and fadeOut() methods |
9 | finish() | To stop, remove and complete all queued animations for the selected elements |
Let’s see an example to work with jQuery method animate(), which animates any element.
You can try to run the following code to learn how to use the jQuery method to animate() to animate a button −
Example
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
$("#button1").click(function(){
$("#shape").animate({width: "300px"});
});
$("#button2").click(function(){
$("#shape").animate({width: "150px"});
});
});
</script>
</head>
<body>
<button id="button1">Increase width</button>
<button id="button2">Original width</button>
<div id="shape" style="background:rgb(73,159,255);height:150px;width:150px;margin:30px;"></div>
</body>
</html>
Updated on: 12-Jun-2020
719 Views
Advertisements