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.

Example

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>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
    $("#btn1").click(function(){
        $("#box").animate({height: "300px"}, 500, function() {
           $(this).hide();
        });
    });
   $("#btn2").click(function(){
        $("#box").animate({height: "300px"}, 500, function() {
           $(this).show();
        });
    });
});
</script>
</head>
<body>

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

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

</body>
</html>
raja
Published on 22-Dec-2017 13:56:35
Advertisements