How to animate div height on mouse hover using jQuery

  493 views   11 months ago jQuery

Use the jQuery animate() method

You can simply use the jQuery animate() method in combination with the mouseenter() and mouseleave() methods to animate the height of a <div> element on mouseover.

Let's try out the following example to understand how it actually works:

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>jQuery Animate Div Height on Hover</title>
<style>
    .box{
        width: 400px;
        height: 150px;
        background: #f0e68c;
        border: 1px solid #a29415;
    }
</style>
<script src="https://code.jquery.com/jquery-1.12.4.min.js"></script>
<script>
    $(document).ready(function(){
        var boxHeight = $(".box").height();
        $(".box").mouseenter(function(){
            $(this).animate({
                height: "300"
            });
        }).mouseleave(function(){
            $(this).animate({
                height: boxHeight
            });
        });
    });
</script>
</head>
<body>
    <p><strong>Note:</strong> Place mouse pointer over the box to play the animation.</p>
    <div class="box"></div>
</body>
</html>

 

Author : Harsukh Makwana
Harsukh Makwana

Hi, My name is Harsukh Makwana. i have been work with many programming language like php, python, javascript, node, react, anguler, etc.. since last 5 year. if you have any issue or want me hire then contact me on harsukh21@gmail.com

Related Articles