A PHP Error was encountered

Severity: 8192

Message: str_replace(): Passing null to parameter #3 ($subject) of type array|string is deprecated

Filename: libraries/Filtered_db.php

Line Number: 23

How to animate div height on mouse hover using jQuery
Q:

How to animate div height on mouse hover using jQuery

mhmadesk
Save to bookmark
|
2022-05-18
|
  237 
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)

This question belongs to these collections

Similar questions

need a help?

find thousands of online teachers now