jQuery Effects

by

Fading, sliding, hiding/showing and animation effects are some of the effects supported by jQuery. The jQuery provides many methods to add these effects to a web page.

Some of the jQuery effect methods are:

METHOD DESCRIPTION
animate() To run a custom animation on the selected elements
clearQueue() To remove all remaining queued functions from the selected elements
delay() To set a delay for all queued functions on the selected elements
dequeue() To remove the next function from the queue, and then executes the function
fadeIn() It fades in the selected elements
fadeOut() It fades out the selected elements
fadeTo() It fades in/out the selected elements to a given opacity
fadeToggle() To toggle between the fadeIn() and fadeOut() methods
finish() To stop, remove, and complete all queued animations for the selected elements
hide() To hide the selected elements
queue() To show the queued functions on the selected elements
show() To show the selected elements
slideDown() To slide down (show) the selected elements
slideToggle() To toggle between the slideUp() and slideDown() methods
slideUp() To slides-up (hide) the selected elements
stop() To stop the currently running animation for the selected elements
toggle() To toggle between the hide() and show() methods

 

Example:

<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
$("#btn1").click(function(){
$("#box").animate({height: "300px"});
});
$("#btn2").click(function(){
$("#box").animate({height: "100px"});
});
});
</script>
</head>
<body>
<button id="btn1">Animate Effect height</button>
<button id="btn2">Reset Effect height</button>
<div id="box" style="background:red;height:100px;width:100px;margin:6px;"></div>
</body>
</html>