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
Live Demo
<!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>
Published on 10-Dec-2017 10:13:58
