Q:

How to animate div height on mouse hover using jQuery

mhmadesk
Save to bookmark
|
2022-05-18
|
  286 
Very Easy
0

How to animate div height on mouse hover using jQuery

JQUERY,
login and add your own answer to this question

All Answers

mhmadesk
2022-05-18
need an explanation for this answer? contact us directly to get an explanation for this answer

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-3.5.1.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>

need an explanation for this answer? contact us directly to get an explanation for this answer

total answers (1)

JavaScript / jQuery Frequently Asked Questions
This question belongs to these collections

Similar questions

need a help?

find thousands of online teachers now
How to animate div width on mouse hover using jQue... >>
<< How to create jQuery slide left and right toggle e...