How animate(), hide and show elements using jQuery?

jQueryWeb DevelopmentFront End Technology

Use the hide() and show() method with animate() to hide and show elements.


You can try to run the following code to learn how to work with animate() method to hide and show elements:

Live Demo

<!DOCTYPE html>
<script src=""></script>
        $("#box").animate({height: "300px"}, 500, function() {
        $("#box").animate({height: "300px"}, 500, function() {

<button id="btn1">Hide</button>
<button id="btn2">Show</button>

<div id="box" style="background:#000000;height:300px;width:100px;margin:10px;"></div>

Updated on 12-Dec-2019 08:34:30