What are the methods used to provide effects in jQuery?

jQuery Web Development Front End Technology

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>

David Meador

Published on 10-Dec-2017 10:13:58

Previous Page Print Page