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>

Updated on: 12-Jun-2020

621 Views

Kickstart Your Career

Get certified by completing the course

Get Started
Advertisements